feat: tools normalized

src/pages/home/index.tsx

@@ -1,62 +1,83 @@
-import {Box, Icon, Input, Stack, TextField} from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
+import { Box, Stack, TextField } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 import SearchIcon from '@mui/icons-material/Search';
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
 
-const exampleTools: { label: string; url: string }[] = [{
-  label: 'Create a transparent image',
-  url: ''
-},
-  {label: 'Convert text to morse code', url: ''},
-  {label: 'Change GIF speed', url: ''},
-  {label: 'Pick a random item', url: ''},
-  {label: 'Find and replace text', url: ''},
-  {label: 'Convert emoji to image', url: ''},
-  {label: 'Split a string', url: '/string/split'},
-  {label: 'Calculate number sum', url: ''},
-  {label: 'Pixelate an image', url: ''},
-]
+const exampleTools: { label: string; url: string }[] = [
+  {
+    label: 'Create a transparent image',
+    url: ''
+  },
+  { label: 'Convert text to morse code', url: '' },
+  { label: 'Change GIF speed', url: '' },
+  { label: 'Pick a random item', url: '' },
+  { label: 'Find and replace text', url: '' },
+  { label: 'Convert emoji to image', url: '' },
+  { label: 'Split a string', url: '/string/split' },
+  { label: 'Calculate number sum', url: '' },
+  { label: 'Pixelate an image', url: '' }
+];
 export default function Home() {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
-  return (<Box padding={5} display={'flex'} flexDirection={'column'} alignItems={'center'} justifyContent={'center'}
-               width={'100%'}>
-    <Box width={"60%"}>
-      <Stack mb={1} direction={'row'} spacing={1}> <Typography fontSize={30}>Transform Your Workflow
-        with </Typography><Typography
-        fontSize={30}
-        color={'primary'}>Omni
-        Tools</Typography></Stack>
-      <Typography fontSize={20} mb={2}>
-        Boost your productivity with Omni Tools, the ultimate toolkit for getting things done quickly! Access thousands
-        of
-        user-friendly utilities for editing images, text, lists, and data, all directly from your browser.
-      </Typography>
+  return (
+    <Box
+      padding={5}
+      display={'flex'}
+      flexDirection={'column'}
+      alignItems={'center'}
+      justifyContent={'center'}
+      width={'100%'}
+    >
+      <Box width={'60%'}>
+        <Stack mb={1} direction={'row'} spacing={1}>
+          {' '}
+          <Typography fontSize={30}>Transform Your Workflow with </Typography>
+          <Typography fontSize={30} color={'primary'}>
+            Omni Tools
+          </Typography>
+        </Stack>
+        <Typography fontSize={20} mb={2}>
+          Boost your productivity with Omni Tools, the ultimate toolkit for
+          getting things done quickly! Access thousands of user-friendly
+          utilities for editing images, text, lists, and data, all directly from
+          your browser.
+        </Typography>
 
-      <TextField fullWidth placeholder={'Search all tools'} sx={{borderRadius: 2}} InputProps={{
-        endAdornment: (
-          <SearchIcon/>
-        ),
-      }}/>
-      <Grid container spacing={1} mt={2}>
-        {exampleTools.map((tool) => (
-          <Grid
-            onClick={() => navigate(tool.url)}
-            item
-            xs={4}
-            key={tool.label}
-            display="flex"
-            flexDirection="row"
-            justifyContent="center"
-            alignItems="center"
-            padding={2}
-            sx={{borderWidth: 1, borderRadius: 3, borderColor: 'grey', borderStyle: 'solid', cursor: 'pointer'}}
-          >
-            <Typography>{tool.label}</Typography>
-          </Grid>
-        ))}
-      </Grid>
+        <TextField
+          fullWidth
+          placeholder={'Search all tools'}
+          sx={{ borderRadius: 2 }}
+          InputProps={{
+            endAdornment: <SearchIcon />
+          }}
+        />
+        <Grid container spacing={1} mt={2}>
+          {exampleTools.map((tool) => (
+            <Grid
+              onClick={() => navigate(tool.url)}
+              item
+              xs={4}
+              key={tool.label}
+              display="flex"
+              flexDirection="row"
+              justifyContent="center"
+              alignItems="center"
+              padding={2}
+              sx={{
+                borderWidth: 1,
+                borderRadius: 3,
+                borderColor: 'grey',
+                borderStyle: 'solid',
+                cursor: 'pointer'
+              }}
+            >
+              <Typography>{tool.label}</Typography>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
     </Box>
-  </Box>)
+  );
 }

src/pages/images/ImagesConfig.tsx

@@ -1,10 +0,0 @@
-import {RouteObject} from "react-router-dom";
-import {lazy} from "react";
-import {PngConfig} from "./png/PngConfig";
-
-const PngHome = lazy(() => import("./index"));
-
-export const ImagesConfig: RouteObject[] = [
-  {path: '', element: <PngHome/>},
-  {path: 'png', children: PngConfig},
-]

src/pages/images/imageTools.ts

@@ -0,0 +1,3 @@
+import { pngTools } from './png/pngTools';
+
+export const imageTools = [...pngTools];

src/pages/images/index.tsx

@@ -1,5 +1,5 @@
-import {Box} from "@mui/material";
+import { Box } from '@mui/material';
 
 export default function ImageHome() {
-  return (<Box></Box>)
+  return <Box></Box>;
 }

src/pages/images/png/PngConfig.tsx

@@ -1,10 +0,0 @@
-import {RouteObject} from "react-router-dom";
-import {lazy} from "react";
-
-const ChangeColorsInPng = lazy(() => import("./change-colors-in-png"));
-const PngHome = lazy(() => import("./"));
-
-export const PngConfig: RouteObject[] = [
-  {path: '', element: <PngHome/>},
-  {path: 'change-colors-in-png', element: <ChangeColorsInPng/>}
-]

src/pages/images/png/change-colors-in-png/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box } from '@mui/material';
 
 export default function ChangeColorsInPng() {
   return <Box></Box>;

src/pages/images/png/change-colors-in-png/meta.ts

@@ -0,0 +1,11 @@
+import { defineTool } from '../../../../tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('png', {
+  path: 'change-colors',
+  name: 'Change colors in PNG',
+  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.",
+  keywords: ['png', 'split'],
+  component: lazy(() => import('./index'))
+});

src/pages/images/png/index.tsx

@@ -1,5 +1,5 @@
-import {Box} from "@mui/material";
+import { Box } from '@mui/material';
 
 export default function PngHome() {
-  return (<Box></Box>)
+  return <Box></Box>;
 }

src/pages/images/png/pngTools.ts

@@ -0,0 +1,3 @@
+import { tool as changeColorsInPng } from './change-colors-in-png/meta';
+
+export const pngTools = [changeColorsInPng];

src/pages/string/StringConfig.tsx

@@ -1,10 +0,0 @@
-import {RouteObject} from "react-router-dom";
-import {lazy} from "react";
-
-const StringHome = lazy(() => import("./index"));
-const StringSplit = lazy(() => import("./split"));
-
-export const StringConfig: RouteObject[] = [
-  {path: '', element: <StringHome/>},
-  {path: 'split', element: <StringSplit/>},
-]

src/pages/string/index.tsx

@@ -1,5 +1,5 @@
-import {Box} from "@mui/material";
+import { Box } from '@mui/material';
 
 export default function StringHome() {
-  return (<Box></Box>)
+  return <Box></Box>;
 }

src/pages/string/split/index.tsx

@@ -186,12 +186,7 @@ export default function SplitText() {
   });
 
   return (
-    <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."
-      }
-    >
+    <Box>
       <Grid container spacing={2}>
         <Grid item xs={6}>
           <ToolTextInput value={input} onChange={setInput} />
@@ -242,6 +237,6 @@ export default function SplitText() {
           )}
         </Formik>
       </ToolOptions>
-    </ToolLayout>
+    </Box>
   );
 }

src/pages/string/split/meta.ts

@@ -0,0 +1,11 @@
+import { defineTool } from '../../../tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('string', {
+  path: 'split',
+  name: '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.",
+  keywords: ['text', 'split'],
+  component: lazy(() => import('./index'))
+});

src/pages/string/stringTools.ts

@@ -0,0 +1,3 @@
+import { tool as stringSplit } from './split/meta';
+
+export const stringTools = [stringSplit];