feat: shortDescription

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