From 429ca0968618636f40c52ce56c21d129b1ff6f9f Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 09:35:44 +0100
Subject: [PATCH] feat: tools by category

---
 .idea/workspace.xml                   |  44 +++----
 src/assets/tools.png                  | Bin 0 -> 22504 bytes
 src/components/Hero.tsx               | 100 +++++++++++++++
 src/components/ToolLayout.tsx         |   6 +-
 src/config/routesConfig.tsx           |   5 +
 src/pages/home/index.tsx              | 173 ++++++--------------------
 src/pages/tools-by-category/index.tsx |  74 +++++++++++
 src/utils/string.ts                   |   3 +-
 8 files changed, 239 insertions(+), 166 deletions(-)
 create mode 100644 src/assets/tools.png
 create mode 100644 src/components/Hero.tsx
 create mode 100644 src/pages/tools-by-category/index.tsx

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0f9921a..e28bb3a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,25 +4,15 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: create transparent png">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: shortDescription">
+      <change afterPath="$PROJECT_DIR$/src/assets/tools.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/ToolInputAndResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" 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/Examples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/Examples.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config/routesConfig.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/routesConfig.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/join/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/split/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" 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" />
@@ -202,14 +192,6 @@
       <workItem from="1719273044735" duration="9847000" />
       <workItem from="1719294110005" duration="3842000" />
     </task>
-    <task id="LOCAL-00009" summary="chore: split string tools ui">
-      <option name="closed" value="true" />
-      <created>1718996769014</created>
-      <option name="number" value="00009" />
-      <option name="presentableId" value="LOCAL-00009" />
-      <option name="project" value="LOCAL" />
-      <updated>1718996769014</updated>
-    </task>
     <task id="LOCAL-00010" summary="chore: use formik">
       <option name="closed" value="true" />
       <created>1718997842506</created>
@@ -594,7 +576,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719297880629</updated>
     </task>
-    <option name="localTasksCounter" value="58" />
+    <task id="LOCAL-00058" summary="feat: shortDescription">
+      <option name="closed" value="true" />
+      <created>1719301172510</created>
+      <option name="number" value="00058" />
+      <option name="presentableId" value="LOCAL-00058" />
+      <option name="project" value="LOCAL" />
+      <updated>1719301172510</updated>
+    </task>
+    <option name="localTasksCounter" value="59" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -615,7 +605,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: copy and import file" />
     <MESSAGE value="refactor: tool options components" />
     <MESSAGE value="fix: join text service" />
     <MESSAGE value="test: join service" />
@@ -640,7 +629,8 @@
     <MESSAGE value="fix: readme" />
     <MESSAGE value="refactor: tool input and result" />
     <MESSAGE value="feat: create transparent png" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: create transparent png" />
+    <MESSAGE value="feat: shortDescription" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: shortDescription" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/assets/tools.png b/src/assets/tools.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dc90a5dbed825e1303a2e049a8d73416d2f4628
GIT binary patch
literal 22504
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

literal 0
HcmV?d00001

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..e9ed495
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,100 @@
+import { Autocomplete, Box, Stack, TextField } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import SearchIcon from '@mui/icons-material/Search';
+import Grid from '@mui/material/Grid';
+import { useState } from 'react';
+import { DefinedTool } from '@tools/defineTool';
+import { filterTools, tools } from '@tools/index';
+import { useNavigate } from 'react-router-dom';
+
+const exampleTools: { label: string; url: string }[] = [
+  {
+    label: 'Create a transparent image',
+    url: '/png/create-transparent'
+  },
+  { label: 'Convert text to morse code', url: '/string/to-morse' },
+  { label: 'Change GIF speed', url: '' },
+  { label: 'Pick a random item', url: '' },
+  { label: 'Find and replace text', url: '' },
+  { label: 'Convert emoji to image', url: '' },
+  { label: 'Split a string', url: '/string/split' },
+  { label: 'Calculate number sum', url: '/number/sum' },
+  { label: 'Pixelate an image', url: '' }
+];
+export default function Hero() {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(tools);
+  const navigate = useNavigate();
+  const handleInputChange = (
+    event: React.ChangeEvent<{}>,
+    newInputValue: string
+  ) => {
+    setInputValue(newInputValue);
+    setFilteredTools(filterTools(tools, newInputValue));
+  };
+  return (
+    <Box width={'60%'}>
+      <Stack mb={1} direction={'row'} spacing={1}>
+        <Typography fontSize={30}>Transform Your Workflow with </Typography>
+        <Typography fontSize={30} color={'primary'}>
+          Omni Tools
+        </Typography>
+      </Stack>
+      <Typography fontSize={20} mb={2}>
+        Boost your productivity with Omni Tools, the ultimate toolkit for
+        getting things done quickly! Access thousands of user-friendly utilities
+        for editing images, text, lists, and data, all directly from your
+        browser.
+      </Typography>
+
+      <Autocomplete
+        sx={{ mb: 2 }}
+        autoHighlight
+        options={filteredTools}
+        getOptionLabel={(option) => option.name}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            fullWidth
+            placeholder={'Search all tools'}
+            sx={{ borderRadius: 2 }}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: <SearchIcon />
+            }}
+            onChange={(event) => handleInputChange(event, event.target.value)}
+          />
+        )}
+        renderOption={(props, option) => (
+          <Box component="li" {...props} onClick={() => navigate(option.path)}>
+            <Box>
+              <Typography fontWeight={'bold'}>{option.name}</Typography>
+              <Typography fontSize={12}>{option.shortDescription}</Typography>
+            </Box>
+          </Box>
+        )}
+      />
+      <Grid container spacing={2} mt={2}>
+        {exampleTools.map((tool) => (
+          <Grid onClick={() => navigate(tool.url)} item xs={4} key={tool.label}>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderWidth: 1,
+                padding: 1,
+                borderRadius: 3,
+                borderColor: 'grey',
+                borderStyle: 'solid',
+                cursor: 'pointer'
+              }}
+            >
+              <Typography>{tool.label}</Typography>
+            </Box>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}
diff --git a/src/components/ToolLayout.tsx b/src/components/ToolLayout.tsx
index 51aade8..be7c75a 100644
--- a/src/components/ToolLayout.tsx
+++ b/src/components/ToolLayout.tsx
@@ -5,6 +5,7 @@ import ToolHeader from './ToolHeader';
 import Separator from '@tools/Separator';
 import AllTools from './allTools/AllTools';
 import { getToolsByCategory } from '@tools/index';
+import { capitalizeFirstLetter } from '../utils/string';
 
 export default function ToolLayout({
   children,
@@ -43,7 +44,10 @@ export default function ToolLayout({
         <ToolHeader title={title} description={description} image={image} />
         {children}
         <Separator backgroundColor="#5581b5" margin="50px" />
-        <AllTools title="All Text Tools" toolCards={otherCategoryTools} />
+        <AllTools
+          title={`All ${capitalizeFirstLetter(type)} tools`}
+          toolCards={otherCategoryTools}
+        />
       </Box>
     </Box>
   );
diff --git a/src/config/routesConfig.tsx b/src/config/routesConfig.tsx
index 54f2445..a68b548 100644
--- a/src/config/routesConfig.tsx
+++ b/src/config/routesConfig.tsx
@@ -3,12 +3,17 @@ import { Navigate } from 'react-router-dom';
 import { lazy } from 'react';
 
 const Home = lazy(() => import('../pages/home'));
+const ToolsByCategory = lazy(() => import('../pages/tools-by-category'));
 
 const routes: RouteObject[] = [
   {
     path: '/',
     element: <Home />
   },
+  {
+    path: '/categories/:categoryName',
+    element: <ToolsByCategory />
+  },
   {
     path: '*',
     element: <Navigate to="404" />
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 8d3cae7..5a1c51b 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,45 +1,14 @@
-import {
-  Autocomplete,
-  Box,
-  Card,
-  CardContent,
-  Stack,
-  TextField
-} from '@mui/material';
+import { Box, Card, CardContent, Stack } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import SearchIcon from '@mui/icons-material/Search';
 import { Link, useNavigate } from 'react-router-dom';
-import { filterTools, getToolsByCategory, tools } from '../../tools';
-import { useState } from 'react';
-import { DefinedTool } from '@tools/defineTool';
+import { getToolsByCategory } from '../../tools';
 import Button from '@mui/material/Button';
+import Hero from 'components/Hero';
 
-const exampleTools: { label: string; url: string }[] = [
-  {
-    label: 'Create a transparent image',
-    url: '/png/create-transparent'
-  },
-  { label: 'Convert text to morse code', url: '/string/to-morse' },
-  { label: 'Change GIF speed', url: '' },
-  { label: 'Pick a random item', url: '' },
-  { label: 'Find and replace text', url: '' },
-  { label: 'Convert emoji to image', url: '' },
-  { label: 'Split a string', url: '/string/split' },
-  { label: 'Calculate number sum', url: '/number/sum' },
-  { label: 'Pixelate an image', url: '' }
-];
 export default function Home() {
   const navigate = useNavigate();
-  const [inputValue, setInputValue] = useState<string>('');
-  const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(tools);
-  const handleInputChange = (
-    event: React.ChangeEvent<{}>,
-    newInputValue: string
-  ) => {
-    setInputValue(newInputValue);
-    setFilteredTools(filterTools(tools, newInputValue));
-  };
+
   return (
     <Box
       padding={5}
@@ -49,108 +18,38 @@ export default function Home() {
       justifyContent={'center'}
       width={'100%'}
     >
-      <Box width={'60%'}>
-        <Stack mb={1} direction={'row'} spacing={1}>
-          <Typography fontSize={30}>Transform Your Workflow with </Typography>
-          <Typography fontSize={30} color={'primary'}>
-            Omni Tools
-          </Typography>
-        </Stack>
-        <Typography fontSize={20} mb={2}>
-          Boost your productivity with Omni Tools, the ultimate toolkit for
-          getting things done quickly! Access thousands of user-friendly
-          utilities for editing images, text, lists, and data, all directly from
-          your browser.
-        </Typography>
-
-        <Autocomplete
-          sx={{ mb: 2 }}
-          autoHighlight
-          options={filteredTools}
-          getOptionLabel={(option) => option.name}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              fullWidth
-              placeholder={'Search all tools'}
-              sx={{ borderRadius: 2 }}
-              InputProps={{
-                ...params.InputProps,
-                endAdornment: <SearchIcon />
-              }}
-              onChange={(event) => handleInputChange(event, event.target.value)}
-            />
-          )}
-          renderOption={(props, option) => (
-            <Box
-              component="li"
-              {...props}
-              onClick={() => navigate(option.path)}
-            >
-              <Box>
-                <Typography fontWeight={'bold'}>{option.name}</Typography>
-                <Typography fontSize={12}>{option.shortDescription}</Typography>
-              </Box>
-            </Box>
-          )}
-        />
-        <Grid container spacing={2} mt={2}>
-          {exampleTools.map((tool) => (
-            <Grid
-              onClick={() => navigate(tool.url)}
-              item
-              xs={4}
-              key={tool.label}
-            >
-              <Box
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderWidth: 1,
-                  padding: 1,
-                  borderRadius: 3,
-                  borderColor: 'grey',
-                  borderStyle: 'solid',
-                  cursor: 'pointer'
-                }}
-              >
-                <Typography>{tool.label}</Typography>
-              </Box>
-            </Grid>
-          ))}
-        </Grid>
-        <Grid container mt={2} spacing={2}>
-          {getToolsByCategory().map((category) => (
-            <Grid key={category.type} item xs={6}>
-              <Card>
-                <CardContent>
-                  <Link
-                    style={{ fontSize: 20 }}
-                    to={'/categories/' + category.type}
-                  >
-                    {category.title}
-                  </Link>
-                  <Typography sx={{ mt: 2 }}>{category.description}</Typography>
-                  <Stack
-                    mt={2}
-                    direction={'row'}
-                    justifyContent={'space-between'}
-                  >
-                    <Button
-                      variant={'contained'}
-                    >{`See all ${category.title}`}</Button>
-                    <Button
-                      onClick={() => navigate(category.example.path)}
-                      variant={'outlined'}
-                    >{`Try ${category.example.title}`}</Button>
-                  </Stack>
-                </CardContent>
-              </Card>
-            </Grid>
-          ))}
-        </Grid>
-      </Box>
+      <Hero />
+      <Grid width={'80%'} container mt={2} spacing={2}>
+        {getToolsByCategory().map((category) => (
+          <Grid key={category.type} item xs={6}>
+            <Card>
+              <CardContent>
+                <Link
+                  style={{ fontSize: 20 }}
+                  to={'/categories/' + category.type}
+                >
+                  {category.title}
+                </Link>
+                <Typography sx={{ mt: 2 }}>{category.description}</Typography>
+                <Stack
+                  mt={2}
+                  direction={'row'}
+                  justifyContent={'space-between'}
+                >
+                  <Button
+                    onClick={() => navigate('/categories/' + category.type)}
+                    variant={'contained'}
+                  >{`See all ${category.title}`}</Button>
+                  <Button
+                    onClick={() => navigate(category.example.path)}
+                    variant={'outlined'}
+                  >{`Try ${category.example.title}`}</Button>
+                </Stack>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
     </Box>
   );
 }
diff --git a/src/pages/tools-by-category/index.tsx b/src/pages/tools-by-category/index.tsx
new file mode 100644
index 0000000..658151f
--- /dev/null
+++ b/src/pages/tools-by-category/index.tsx
@@ -0,0 +1,74 @@
+import {
+  Box,
+  Card,
+  CardContent,
+  Divider,
+  Stack,
+  useTheme
+} from '@mui/material';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { getToolsByCategory, tools } from '../../tools';
+import Button from '@mui/material/Button';
+import Hero from 'components/Hero';
+import AllTools from '../../components/allTools/AllTools';
+import { capitalizeFirstLetter } from '../../utils/string';
+import toolsPng from '@assets/tools.png';
+
+export default function Home() {
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const { categoryName } = useParams();
+  return (
+    <Box>
+      <Box
+        padding={5}
+        display={'flex'}
+        flexDirection={'column'}
+        alignItems={'center'}
+        justifyContent={'center'}
+        width={'100%'}
+      >
+        <Hero />
+      </Box>
+      <Divider sx={{ borderColor: theme.palette.primary.main }} />
+      <Box width={'100%'} mt={3} ml={7} padding={3}>
+        <Typography
+          fontSize={22}
+          color={theme.palette.primary.main}
+        >{`All ${capitalizeFirstLetter(categoryName)} Tools`}</Typography>
+        <Grid container spacing={2} mt={2}>
+          {getToolsByCategory()
+            .find(({ type }) => type === categoryName)
+            ?.tools?.map((tool) => (
+              <Grid item xs={12} md={4} key={tool.path}>
+                <Stack
+                  sx={{
+                    cursor: 'pointer',
+                    '&:hover': {
+                      backgroundColor: theme.palette.background.default // Change this to your desired hover color
+                    }
+                  }}
+                  onClick={() => navigate('/' + tool.path)}
+                  direction={'row'}
+                  spacing={2}
+                  padding={2}
+                  border={1}
+                  borderRadius={2}
+                >
+                  <img width={100} src={tool.image ?? toolsPng} />
+                  <Box>
+                    <Link to={'/' + tool.path}>{tool.name}</Link>
+                    <Typography sx={{ mt: 2 }}>
+                      {tool.shortDescription}
+                    </Typography>
+                  </Box>
+                </Stack>
+              </Grid>
+            ))}
+        </Grid>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/utils/string.ts b/src/utils/string.ts
index 2d08599..7662701 100644
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@@ -1,3 +1,4 @@
-export function capitalizeFirstLetter(string: string) {
+export function capitalizeFirstLetter(string: string | undefined) {
+  if (!string) return '';
   return string.charAt(0).toUpperCase() + string.slice(1);
 }