feat: shortDescription

src/components/ToolInputAndResult.tsx

@@ -9,7 +9,7 @@ export default function ToolInputAndResult({
   result: ReactNode;
 }) {
   return (
-    <Grid container spacing={2}>
+    <Grid id="tool" container spacing={2}>
       <Grid item xs={6}>
         {input}
       </Grid>

src/components/ToolLayout.tsx

@@ -2,18 +2,33 @@ import { Box } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import ToolHeader from './ToolHeader';
+import Separator from '@tools/Separator';
+import AllTools from './allTools/AllTools';
+import { getToolsByCategory } from '@tools/index';
 
 export default function ToolLayout({
   children,
   title,
   description,
-  image
+  image,
+  type
 }: {
   title: string;
   description: string;
   image?: string;
   children: ReactNode;
+  type: string;
 }) {
+  const otherCategoryTools =
+    getToolsByCategory()
+      .find((category) => category.type === type)
+      ?.tools.filter((tool) => tool.name !== title)
+      .map((tool) => ({
+        title: tool.name,
+        description: tool.shortDescription,
+        link: '/' + tool.path
+      })) ?? [];
+
   return (
     <Box
       width={'100%'}
@@ -27,6 +42,8 @@ export default function ToolLayout({
       <Box width={'85%'}>
         <ToolHeader title={title} description={description} image={image} />
         {children}
+        <Separator backgroundColor="#5581b5" margin="50px" />
+        <AllTools title="All Text Tools" toolCards={otherCategoryTools} />
       </Box>
     </Box>
   );

src/components/allTools/ToolCard.tsx

@@ -1,17 +1,21 @@
 import { Box, Link, Card, CardContent, Typography } from '@mui/material';
 import { ToolCardProps } from './AllTools';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { useNavigate } from 'react-router-dom';
 
 export default function ToolCard({ title, description, link }: ToolCardProps) {
+  const navigate = useNavigate();
   return (
     <Card
+      onClick={() => navigate(link)}
       raised
       sx={{
         borderRadius: 2,
         bgcolor: '#5581b5',
         borderColor: '#5581b5',
         color: '#fff',
-        boxShadow: '6px 6px 12px #b8b9be, -6px -6px 12px #fff'
+        boxShadow: '6px 6px 12px #b8b9be, -6px -6px 12px #fff',
+        cursor: 'pointer'
       }}
     >
       <CardContent>

src/components/examples/ExampleCard.tsx

@@ -5,7 +5,8 @@ import {
   Card,
   CardContent,
   Typography,
-  TextField
+  TextField,
+  useTheme
 } from '@mui/material';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RequiredOptions from './RequiredOptions';
@@ -18,11 +19,12 @@ export default function ExampleCard({
   requiredOptions,
   changeInputResult
 }: ExampleCardProps) {
+  const theme = useTheme();
   return (
     <Card
       raised
       sx={{
-        bgcolor: '#d1d9e6',
+        bgcolor: theme.palette.background.default,
         height: '100%',
         overflow: 'hidden',
         borderRadius: 2,

src/components/examples/Examples.tsx

@@ -28,7 +28,7 @@ export default function Examples({
   exampleCards
 }: ExampleProps) {
   return (
-    <Box mt={4}>
+    <Box id={'examples'} mt={4}>
       <Box mt={4} display="flex" gap={1} alignItems="center">
         <Typography mb={2} fontSize={30} color={'primary'}>
           {title}

src/components/input/ToolTextInput.tsx

@@ -46,7 +46,7 @@ export default function ToolTextInput({
     fileInputRef.current?.click();
   };
   return (
-    <Box id="tool">
+    <Box>
       <InputHeader title={title} />
       <TextField
         value={value}