chore: tools by category

src/components/App.tsx

@@ -8,6 +8,7 @@ import theme from '../config/muiConfig';
 import { CustomSnackBarProvider } from '../contexts/CustomSnackBarContext';
 import { SnackbarProvider } from 'notistack';
 import { tools } from '../tools';
+import './index.css';
 
 const AppRoutes = () => {
   const updatedRoutesConfig = [...routesConfig];

src/components/ToolHeader.tsx

@@ -1,13 +1,17 @@
 import { Box, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import textImage from '../assets/text.png';
 
 interface ToolHeaderProps {
   title: string;
   description: string;
+  image?: string;
 }
 
-export default function ToolHeader({ title, description }: ToolHeaderProps) {
+export default function ToolHeader({
+  image,
+  title,
+  description
+}: ToolHeaderProps) {
   return (
     <Stack direction={'row'} alignItems={'center'} spacing={2} mt={4}>
       <Box>
@@ -16,7 +20,7 @@ export default function ToolHeader({ title, description }: ToolHeaderProps) {
         </Typography>
         <Typography fontSize={20}>{description}</Typography>
       </Box>
-      <img width={'20%'} src={textImage} />
+      {image && <img width={'250'} src={image} />}
     </Stack>
   );
 }

src/components/ToolLayout.tsx

@@ -6,10 +6,12 @@ import ToolHeader from './ToolHeader';
 export default function ToolLayout({
   children,
   title,
-  description
+  description,
+  image
 }: {
   title: string;
   description: string;
+  image?: string;
   children: ReactNode;
 }) {
   return (
@@ -23,7 +25,7 @@ export default function ToolLayout({
         <title>{`${title} - Omni Tools`}</title>
       </Helmet>
       <Box width={'85%'}>
-        <ToolHeader title={title} description={description} />
+        <ToolHeader title={title} description={description} image={image} />
         {children}
       </Box>
     </Box>

src/components/index.css

@@ -0,0 +1,7 @@
+a {
+  color: #1c76ce;
+}
+
+a:hover {
+  color: #030362
+}