feat: tools normalized

src/components/App.tsx

@@ -7,9 +7,14 @@ import { ThemeProvider } from '@mui/material';
 import theme from '../config/muiConfig';
 import { CustomSnackBarProvider } from '../contexts/CustomSnackBarContext';
 import { SnackbarProvider } from 'notistack';
+import { tools } from '../tools';
 
 const AppRoutes = () => {
-  return useRoutes(routesConfig);
+  const updatedRoutesConfig = [...routesConfig];
+  tools.forEach((tool) => {
+    updatedRoutesConfig.push({ path: tool.path, element: tool.component() });
+  });
+  return useRoutes(updatedRoutesConfig);
 };
 
 function App() {

src/components/Loading.tsx

@@ -1,7 +1,7 @@
-import Typography from '@mui/material/Typography'
-import { useState } from 'react'
-import Box from '@mui/material/Box'
-import { useTimeout } from '../hooks'
+import Typography from '@mui/material/Typography';
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import { useTimeout } from '../hooks';
 
 export type FuseLoadingProps = {
   delay?: number;
@@ -12,16 +12,15 @@ export type FuseLoadingProps = {
  * FuseLoading displays a loading state with an optional delay
  */
 function FuseLoading(props: FuseLoadingProps) {
-  const { delay = 0, className } = props
-  const [showLoading, setShowLoading] = useState(!delay)
+  const { delay = 0, className } = props;
+  const [showLoading, setShowLoading] = useState(!delay);
 
   useTimeout(() => {
-    setShowLoading(true)
-  }, delay)
+    setShowLoading(true);
+  }, delay);
 
   return (
-    <div
-    >
+    <div>
       <Typography
         className="-mb-16 text-13 font-medium sm:text-20"
         color="text.secondary"
@@ -41,7 +40,7 @@ function FuseLoading(props: FuseLoadingProps) {
         <div className="bounce3" />
       </Box>
     </div>
-  )
+  );
 }
 
-export default FuseLoading
+export default FuseLoading;

src/components/Navbar/index.tsx

@@ -4,22 +4,41 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import {Link, useNavigate} from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import githubIcon from '../../assets/github-mark.png'; // Adjust the path to your GitHub icon
 
 const Navbar: React.FC = () => {
   const navigate = useNavigate();
   return (
-    <AppBar position="static" style={{backgroundColor: 'white', color: 'black'}}>
+    <AppBar
+      position="static"
+      style={{ backgroundColor: 'white', color: 'black' }}
+    >
       <Toolbar>
-        <Typography onClick={() => navigate('/')} fontSize={20}
-                    sx={{flexGrow: 1, cursor: 'pointer'}} color={'primary'}>OmniTools</Typography>
+        <Typography
+          onClick={() => navigate('/')}
+          fontSize={20}
+          sx={{ flexGrow: 1, cursor: 'pointer' }}
+          color={'primary'}
+        >
+          OmniTools
+        </Typography>
 
         <Button color="inherit">
-          <Link to="/features" style={{textDecoration: 'none', color: 'inherit'}}>Features</Link>
+          <Link
+            to="/features"
+            style={{ textDecoration: 'none', color: 'inherit' }}
+          >
+            Features
+          </Link>
         </Button>
         <Button color="inherit">
-          <Link to="/about-us" style={{textDecoration: 'none', color: 'inherit'}}>About Us</Link>
+          <Link
+            to="/about-us"
+            style={{ textDecoration: 'none', color: 'inherit' }}
+          >
+            About Us
+          </Link>
         </Button>
 
         <IconButton
@@ -28,7 +47,11 @@ const Navbar: React.FC = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <img src={githubIcon} alt="GitHub" style={{height: '24px', marginRight: '8px'}}/>
+          <img
+            src={githubIcon}
+            alt="GitHub"
+            style={{ height: '24px', marginRight: '8px' }}
+          />
           <Typography variant="button">Star us</Typography>
         </IconButton>
       </Toolbar>

src/components/ToolHeader.tsx

@@ -1,18 +1,22 @@
-import {Box, Stack} from "@mui/material";
-import Typography from "@mui/material/Typography";
-import textImage from '../assets/text.png'
+import { Box, Stack } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import textImage from '../assets/text.png';
 
 interface ToolHeaderProps {
   title: string;
   description: string;
 }
 
-export default function ToolHeader({title, description}: ToolHeaderProps) {
-  return (<Stack direction={'row'} alignItems={'center'} spacing={2} mt={4}>
-    <Box>
-      <Typography mb={2} fontSize={30} color={'primary'}>{title}</Typography>
-      <Typography fontSize={20}>{description}</Typography>
-    </Box>
-    <img width={'20%'} src={textImage}/>
-  </Stack>)
+export default function ToolHeader({ title, description }: ToolHeaderProps) {
+  return (
+    <Stack direction={'row'} alignItems={'center'} spacing={2} mt={4}>
+      <Box>
+        <Typography mb={2} fontSize={30} color={'primary'}>
+          {title}
+        </Typography>
+        <Typography fontSize={20}>{description}</Typography>
+      </Box>
+      <img width={'20%'} src={textImage} />
+    </Stack>
+  );
 }

src/components/input/ToolTextInput.tsx

@@ -1,14 +1,18 @@
-import { Box, Stack, TextField } from '@mui/material'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
-import PublishIcon from '@mui/icons-material/Publish'
-import ContentPasteIcon from '@mui/icons-material/ContentPaste'
-import React from 'react'
+import { Box, Stack, TextField } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import PublishIcon from '@mui/icons-material/Publish';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import React from 'react';
 
-export default function ToolTextInput({ value, onChange, title = 'Input text' }: {
+export default function ToolTextInput({
+  value,
+  onChange,
+  title = 'Input text'
+}: {
   title?: string;
-  value: string
-  onChange: (value: string) => void
+  value: string;
+  onChange: (value: string) => void;
 }) {
   return (
     <Box>
@@ -27,5 +31,5 @@ export default function ToolTextInput({ value, onChange, title = 'Input text' }:
         <Button startIcon={<ContentPasteIcon />}>Copy to clipboard</Button>
       </Stack>
     </Box>
-  )
+  );
 }