chore: tools by category

iib0011 · Jun 23, 2024 · bb3964e · bb3964e
1 parent 5ddfa13
commit bb3964e
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 31 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -8,6 +8,7 @@ import theme from '../config/muiConfig';
 import { CustomSnackBarProvider } from '../contexts/CustomSnackBarContext';
 import { SnackbarProvider } from 'notistack';
 import { tools } from '../tools';
+import './index.css';
 
 const AppRoutes = () => {
   const updatedRoutesConfig = [...routesConfig];

diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx
@@ -1,13 +1,17 @@
 import { Box, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import textImage from '../assets/text.png';
 
 interface ToolHeaderProps {
   title: string;
   description: string;
+  image?: string;
 }
 
-export default function ToolHeader({ title, description }: ToolHeaderProps) {
+export default function ToolHeader({
+  image,
+  title,
+  description
+}: ToolHeaderProps) {
   return (
     <Stack direction={'row'} alignItems={'center'} spacing={2} mt={4}>
       <Box>
@@ -16,7 +20,7 @@ export default function ToolHeader({ title, description }: ToolHeaderProps) {
         </Typography>
         <Typography fontSize={20}>{description}</Typography>
       </Box>
-      <img width={'20%'} src={textImage} />
+      {image && <img width={'250'} src={image} />}
     </Stack>
   );
 }
diff --git a/src/components/ToolLayout.tsx b/src/components/ToolLayout.tsx
@@ -6,10 +6,12 @@ import ToolHeader from './ToolHeader';
 export default function ToolLayout({
   children,
   title,
-  description
+  description,
+  image
 }: {
   title: string;
   description: string;
+  image?: string;
   children: ReactNode;
 }) {
   return (
@@ -23,7 +25,7 @@ export default function ToolLayout({
         <title>{`${title} - Omni Tools`}</title>
       </Helmet>
       <Box width={'85%'}>
-        <ToolHeader title={title} description={description} />
+        <ToolHeader title={title} description={description} image={image} />
         {children}
       </Box>
     </Box>

diff --git a/src/components/index.css b/src/components/index.css
@@ -0,0 +1,7 @@
+a {
+  color: #1c76ce;
+}
+
+a:hover {
+  color: #030362
+}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -1,11 +1,19 @@
-import { Autocomplete, Box, Stack, TextField } from '@mui/material';
+import {
+  Autocomplete,
+  Box,
+  Card,
+  CardContent,
+  Stack,
+  TextField
+} from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import SearchIcon from '@mui/icons-material/Search';
-import { useNavigate } from 'react-router-dom';
-import { filterTools, tools } from '../../tools';
+import { Link, useNavigate } from 'react-router-dom';
+import { filterTools, getToolsByCategory, tools } from '../../tools';
 import { useState } from 'react';
 import { DefinedTool } from '../../tools/defineTool';
+import Button from '@mui/material/Button';
 
 const exampleTools: { label: string; url: string }[] = [
   {
@@ -86,27 +94,59 @@ export default function Home() {
             </Box>
           )}
         />
-        <Grid container spacing={1} mt={2}>
+        <Grid container spacing={2} mt={2}>
           {exampleTools.map((tool) => (
             <Grid
               onClick={() => navigate(tool.url)}
               item
               xs={4}
               key={tool.label}
-              display="flex"
-              flexDirection="row"
-              justifyContent="center"
-              alignItems="center"
-              padding={2}
-              sx={{
-                borderWidth: 1,
-                borderRadius: 3,
-                borderColor: 'grey',
-                borderStyle: 'solid',
-                cursor: 'pointer'
-              }}
             >
-              <Typography>{tool.label}</Typography>
+              <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>

diff --git a/src/pages/string/split/index.tsx b/src/pages/string/split/index.tsx
@@ -1,5 +1,3 @@
-import ToolHeader from '../../../components/ToolHeader';
-import ToolLayout from '../../../components/ToolLayout';
 import { Box, Stack, TextField } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';

diff --git a/src/pages/string/split/meta.ts b/src/pages/string/split/meta.ts
@@ -1,9 +1,11 @@
 import { defineTool } from '../../../tools/defineTool';
 import { lazy } from 'react';
+import image from '../../../assets/text.png';
 
 export const tool = defineTool('string', {
   path: 'split',
   name: 'Text splitter',
+  image: image,
   description:
     "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
   keywords: ['text', 'split'],

diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
@@ -5,14 +5,17 @@ interface ToolOptions {
   path: string;
   component: LazyExoticComponent<JSXElementConstructor<NonNullable<unknown>>>;
   keywords: string[];
+  image?: string;
   name: string;
   description: string;
 }
 
 export interface DefinedTool {
+  type: string;
   path: string;
   name: string;
   description: string;
+  image?: string;
   keywords: string[];
   component: () => JSX.Element;
 }
@@ -21,16 +24,18 @@ export const defineTool = (
   basePath: string,
   options: ToolOptions
 ): DefinedTool => {
-  const { path, name, description, keywords, component } = options;
+  const { image, path, name, description, keywords, component } = options;
   const Component = component;
   return {
+    type: basePath,
     path: `${basePath}/${path}`,
     name,
+    image,
     description,
     keywords,
     component: () => {
       return (
-        <ToolLayout title={name} description={description}>
+        <ToolLayout title={name} description={description} image={image}>
           <Component />
         </ToolLayout>
       );

diff --git a/src/tools/index.ts b/src/tools/index.ts
@@ -1,9 +1,21 @@
 import { stringTools } from '../pages/string/stringTools';
 import { imageTools } from '../pages/images/imageTools';
 import { DefinedTool } from './defineTool';
+import { capitalizeFirstLetter } from '../utils/string';
 
-export const tools: DefinedTool[] = [...stringTools, ...imageTools];
-
+export const tools: DefinedTool[] = [...imageTools, ...stringTools];
+const categoriesDescriptions: { type: string; value: string }[] = [
+  {
+    type: 'string',
+    value:
+      'Tools for working with text – convert text to images, find and replace text, split text into fragments, join text lines, repeat text, and much more.'
+  },
+  {
+    type: 'png',
+    value:
+      'Tools for working with PNG images – convert PNGs to JPGs, create transparent PNGs, change PNG colors, crop, rotate, resize PNGs, and much more.'
+  }
+];
 export const filterTools = (
   tools: DefinedTool[],
   query: string
@@ -21,3 +33,26 @@ export const filterTools = (
       )
   );
 };
+
+export const getToolsByCategory = (): {
+  title: string;
+  description: string;
+  type: string;
+  example: { title: string; path: string };
+}[] => {
+  const grouped: Partial<Record<string, DefinedTool[]>> = Object.groupBy(
+    tools,
+    ({ type }) => type
+  );
+  return Object.entries(grouped).map(([type, tls]) => {
+    return {
+      title: `${capitalizeFirstLetter(type)} Tools`,
+      description:
+        categoriesDescriptions.find((desc) => desc.type === type)?.value ?? '',
+      type,
+      example: tls
+        ? { title: tls[0].name, path: tls[0].path }
+        : { title: '', path: '' }
+    };
+  });
+};
diff --git a/src/utils/string.ts b/src/utils/string.ts
@@ -0,0 +1,3 @@
+export function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}