Add bookmark button to tool page

src/components/ToolHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, styled, useTheme } from '@mui/material';
+import { Box, Button, Stack, styled, useTheme } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import ToolBreadcrumb from './ToolBreadcrumb';
 import { capitalizeFirstLetter } from '../utils/string';
@@ -7,6 +7,7 @@ import { Icon, IconifyIcon } from '@iconify/react';
 import { categoriesColors } from '../config/uiConfig';
 import { getToolsByCategory } from '@tools/index';
 import { useEffect, useState } from 'react';
+import { isBookmarked, toggleBookmarked } from '@utils/bookmark';
 
 const StyledButton = styled(Button)(({ theme }) => ({
   backgroundColor: 'white',
@@ -21,6 +22,7 @@ interface ToolHeaderProps {
   description: string;
   icon?: IconifyIcon | string;
   type: string;
+  path: string;
 }
 
 function ToolLinks() {
@@ -80,8 +82,11 @@ export default function ToolHeader({
   icon,
   title,
   description,
-  type
+  type,
+  path
 }: ToolHeaderProps) {
+  const theme = useTheme();
+  const [bookmarked, setBookmarked] = useState<boolean>(isBookmarked(path));
   return (
     <Box my={4}>
       <ToolBreadcrumb
@@ -98,9 +103,24 @@ export default function ToolHeader({
       />
       <Grid mt={1} container spacing={2}>
         <Grid item xs={12} md={8}>
-          <Typography mb={2} fontSize={30} color={'primary'}>
-            {title}
-          </Typography>
+          <Stack direction={'row'} spacing={2} alignItems={'center'}>
+            <Typography mb={2} fontSize={30} color={'primary'}>
+              {title}
+            </Typography>
+            <Icon
+              fontSize={30}
+              color={
+                bookmarked
+                  ? theme.palette.primary.main
+                  : theme.palette.grey[500]
+              }
+              onClick={(e) => {
+                toggleBookmarked(path);
+                setBookmarked(!bookmarked);
+              }}
+              icon={bookmarked ? 'mdi:bookmark' : 'mdi:bookmark-plus-outline'}
+            />
+          </Stack>
           <Typography fontSize={20}>{description}</Typography>
           <ToolLinks />
         </Grid>