fix: misc

src/pages/home/Categories.tsx

@@ -0,0 +1,86 @@
+import { getToolsByCategory } from '@tools/index';
+import Grid from '@mui/material/Grid';
+import { Card, CardContent, Stack } from '@mui/material';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { Link, useNavigate } from 'react-router-dom';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import { useState } from 'react';
+
+type ArrayElement<ArrayType extends readonly unknown[]> =
+  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+const SingleCategory = function ({
+  category,
+  index
+}: {
+  category: ArrayElement<ReturnType<typeof getToolsByCategory>>;
+  index: number;
+}) {
+  const navigate = useNavigate();
+  const [hovered, setHovered] = useState<boolean>(false);
+  const Icon = category.icon;
+  const toggleHover = () => setHovered((prevState) => !prevState);
+  return (
+    <Grid
+      item
+      xs={12}
+      md={6}
+      onMouseEnter={toggleHover}
+      onMouseLeave={toggleHover}
+    >
+      <Card
+        sx={{
+          height: '100%',
+          backgroundColor: hovered ? '#FAFAFD' : 'white'
+        }}
+      >
+        <CardContent>
+          <Stack direction={'row'} spacing={2} alignItems={'center'}>
+            <HugeiconsIcon
+              icon={Icon}
+              style={{
+                transform: `scale(${hovered ? 1.1 : 1}`
+              }}
+              color={categoriesColors[index % categoriesColors.length]}
+            />
+            <Link
+              style={{ fontSize: 20, fontWeight: 700, color: 'black' }}
+              to={'/categories/' + category.type}
+            >
+              {category.title}
+            </Link>
+          </Stack>
+          <Typography sx={{ mt: 2 }}>{category.description}</Typography>
+          <Grid mt={1} container spacing={2}>
+            <Grid item xs={12} md={6}>
+              <Button
+                fullWidth
+                onClick={() => navigate('/categories/' + category.type)}
+                variant={'contained'}
+              >{`See all ${category.title}`}</Button>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Button
+                sx={{ backgroundColor: 'white' }}
+                fullWidth
+                onClick={() => navigate(category.example.path)}
+                variant={'outlined'}
+              >{`Try ${category.example.title}`}</Button>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+    </Grid>
+  );
+};
+const categoriesColors: string[] = ['#8FBC5D', '#3CB6E2', '#FFD400', '#AB6993'];
+export default function Categories() {
+  return (
+    <Grid width={'80%'} container mt={2} spacing={2}>
+      {getToolsByCategory().map((category, index) => (
+        <SingleCategory key={category.type} category={category} index={index} />
+      ))}
+    </Grid>
+  );
+}