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

src/pages/home/index.tsx

@@ -1,14 +1,8 @@
-import { Box, Card, CardContent } from '@mui/material';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import { Link, useNavigate } from 'react-router-dom';
-import { getToolsByCategory } from '../../tools';
-import Button from '@mui/material/Button';
+import { Box } from '@mui/material';
 import Hero from 'components/Hero';
+import Categories from './Categories';
 
 export default function Home() {
-  const navigate = useNavigate();
-
   return (
     <Box
       padding={{ xs: 1, md: 3, lg: 5 }}
@@ -19,39 +13,7 @@ export default function Home() {
       width={'100%'}
     >
       <Hero />
-      <Grid width={'80%'} container mt={2} spacing={2}>
-        {getToolsByCategory().map((category) => (
-          <Grid key={category.type} item xs={12} md={6}>
-            <Card sx={{ height: '100%' }}>
-              <CardContent>
-                <Link
-                  style={{ fontSize: 20 }}
-                  to={'/categories/' + category.type}
-                >
-                  {category.title}
-                </Link>
-                <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
-                      fullWidth
-                      onClick={() => navigate(category.example.path)}
-                      variant={'outlined'}
-                    >{`Try ${category.example.title}`}</Button>
-                  </Grid>
-                </Grid>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
+      <Categories />
     </Box>
   );
 }

src/pages/tools/list/index.ts

@@ -17,9 +17,9 @@ export const listTools = [
   listFindUnique,
   listFindMostPopular,
   listGroup,
-  listWrap,
+  // listWrap,
   listRotate,
-  listShuffle,
-  listTruncate,
-  listDuplicate
+  listShuffle
+  // listTruncate,
+  // listDuplicate
 ];

src/pages/tools/string/index.ts

@@ -11,11 +11,11 @@ import { tool as stringJoin } from './join/meta';
 export const stringTools = [
   stringSplit,
   stringJoin,
-  stringToMorse,
-  stringReverse,
-  stringRandomizeCase,
-  stringUppercase,
-  stringExtractSubstring,
-  stringCreatePalindrome,
-  stringPalindrome
+  stringToMorse
+  // stringReverse,
+  // stringRandomizeCase,
+  // stringUppercase,
+  // stringExtractSubstring,
+  // stringCreatePalindrome,
+  // stringPalindrome
 ];