From 8d3b0b3840f1cc541d1a346275287c821e8dd089 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 27 Feb 2025 13:09:02 +0000
Subject: [PATCH] style: tool categories

---
 .idea/workspace.xml           | 50 +++++++++-------------
 src/pages/home/Categories.tsx | 78 +++++++++++++++++++----------------
 2 files changed, 63 insertions(+), 65 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0e8b3be..d1beafe 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,19 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: examples">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: json pretty">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/home/Categories.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/Categories.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/join/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/utils/string.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/string.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -273,22 +263,6 @@
       <workItem from="1740584243965" duration="17000" />
       <workItem from="1740613094492" duration="9615000" />
     </task>
-    <task id="LOCAL-00080" summary="fix: ci">
-      <option name="closed" value="true" />
-      <created>1719588378907</created>
-      <option name="number" value="00080" />
-      <option name="presentableId" value="LOCAL-00080" />
-      <option name="project" value="LOCAL" />
-      <updated>1719588378907</updated>
-    </task>
-    <task id="LOCAL-00081" summary="fix: ci">
-      <option name="closed" value="true" />
-      <created>1719588501953</created>
-      <option name="number" value="00081" />
-      <option name="presentableId" value="LOCAL-00081" />
-      <option name="project" value="LOCAL" />
-      <updated>1719588501953</updated>
-    </task>
     <task id="LOCAL-00082" summary="fix: ci">
       <option name="closed" value="true" />
       <created>1719588854025</created>
@@ -665,7 +639,23 @@
       <option name="project" value="LOCAL" />
       <updated>1740620866551</updated>
     </task>
-    <option name="localTasksCounter" value="129" />
+    <task id="LOCAL-00129" summary="feat: json pretty">
+      <option name="closed" value="true" />
+      <created>1740661424202</created>
+      <option name="number" value="00129" />
+      <option name="presentableId" value="LOCAL-00129" />
+      <option name="project" value="LOCAL" />
+      <updated>1740661424202</updated>
+    </task>
+    <task id="LOCAL-00130" summary="feat: json pretty">
+      <option name="closed" value="true" />
+      <created>1740661540908</created>
+      <option name="number" value="00130" />
+      <option name="presentableId" value="LOCAL-00130" />
+      <option name="project" value="LOCAL" />
+      <updated>1740661540908</updated>
+    </task>
+    <option name="localTasksCounter" value="131" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -724,7 +714,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: rotate ui" />
     <MESSAGE value="feat: shuffle ui" />
     <MESSAGE value="refactor: remove validation schema" />
     <MESSAGE value="refactor: optimize imports" />
@@ -749,7 +738,8 @@
     <MESSAGE value="chore: show tooloptions in example" />
     <MESSAGE value="refact: examples" />
     <MESSAGE value="fix: examples" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: examples" />
+    <MESSAGE value="feat: json pretty" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: json pretty" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/home/Categories.tsx b/src/pages/home/Categories.tsx
index d8aa5cb..afd9664 100644
--- a/src/pages/home/Categories.tsx
+++ b/src/pages/home/Categories.tsx
@@ -1,6 +1,6 @@
 import { getToolsByCategory } from '@tools/index';
 import Grid from '@mui/material/Grid';
-import { Card, CardContent, Stack } from '@mui/material';
+import { Box, Card, CardContent, Stack } from '@mui/material';
 import { Link, useNavigate } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
@@ -35,41 +35,49 @@ const SingleCategory = function ({
           backgroundColor: hovered ? '#FAFAFD' : 'white'
         }}
       >
-        <CardContent>
-          <Stack direction={'row'} spacing={2} alignItems={'center'}>
-            <Icon
-              icon={category.icon}
-              fontSize={'60px'}
-              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>
+        <CardContent sx={{ height: '100%' }}>
+          <Stack
+            direction={'column'}
+            height={'100%'}
+            justifyContent={'space-between'}
+          >
+            <Box>
+              <Stack direction={'row'} spacing={2} alignItems={'center'}>
+                <Icon
+                  icon={category.icon}
+                  fontSize={'60px'}
+                  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>
+            </Box>
+            <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>
           </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>