feat: react helmet

src/components/ToolLayout.tsx

@@ -1,7 +1,31 @@
-import {Box} from "@mui/material";
-import {ReactNode} from "react";
+import { Box } from '@mui/material';
+import React, { ReactNode } from 'react';
+import { Helmet } from 'react-helmet';
+import ToolHeader from './ToolHeader';
 
-export default function ToolLayout({children}: { children: ReactNode }) {
-  return (<Box width={'100%'} display={'flex'} flexDirection={'column'} alignItems={'center'}><Box
-    width={'85%'}>{children}</Box></Box>)
+export default function ToolLayout({
+  children,
+  title,
+  description
+}: {
+  title: string;
+  description: string;
+  children: ReactNode;
+}) {
+  return (
+    <Box
+      width={'100%'}
+      display={'flex'}
+      flexDirection={'column'}
+      alignItems={'center'}
+    >
+      <Helmet>
+        <title>{`${title} - Omni Tools`}</title>
+      </Helmet>
+      <Box width={'85%'}>
+        <ToolHeader title={title} description={description} />
+        {children}
+      </Box>
+    </Box>
+  );
 }

src/pages/string/split/index.tsx

@@ -186,14 +186,12 @@ export default function SplitText() {
   });
 
   return (
-    <ToolLayout>
-      <ToolHeader
-        title={'Text Splitter'}
-        description={
-          "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks."
-        }
-      />
-
+    <ToolLayout
+      title={'Text Splitter'}
+      description={
+        "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks."
+      }
+    >
       <Grid container spacing={2}>
         <Grid item xs={6}>
           <ToolTextInput value={input} onChange={setInput} />