chore: tools by category

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>
   );
 }