feat: ToolBreadcrumb

src/components/ToolBreadcrumb.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Breadcrumbs, Typography, useTheme } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+interface BreadcrumbItem {
+  title: string;
+  link?: string; // link is optional for the last item
+}
+
+interface BreadcrumbComponentProps {
+  items: BreadcrumbItem[];
+}
+
+const ToolBreadcrumb: React.FC<BreadcrumbComponentProps> = ({ items }) => {
+  const theme = useTheme();
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      {items.map((item, index) => {
+        if (index === items.length - 1 || !item.link) {
+          return (
+            <Typography color="textPrimary" key={index}>
+              {item.title}
+            </Typography>
+          );
+        }
+        return (
+          <Link color={theme.palette.primary.main} to={item.link} key={index}>
+            {item.title}
+          </Link>
+        );
+      })}
+    </Breadcrumbs>
+  );
+};
+
+export default ToolBreadcrumb;

src/components/ToolHeader.tsx

@@ -1,10 +1,13 @@
 import { Button, Box, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
+import ToolBreadcrumb from './ToolBreadcrumb';
+import { capitalizeFirstLetter } from '../utils/string';
 
 interface ToolHeaderProps {
   title: string;
   description: string;
   image?: string;
+  type: string;
 }
 
 function ToolLinks() {
@@ -26,18 +29,31 @@ function ToolLinks() {
 export default function ToolHeader({
   image,
   title,
-  description
+  description,
+  type
 }: ToolHeaderProps) {
   return (
-    <Stack direction={'row'} alignItems={'center'} spacing={2} my={4}>
-      <Box>
-        <Typography mb={2} fontSize={30} color={'primary'}>
-          {title}
-        </Typography>
-        <Typography fontSize={20}>{description}</Typography>
-        <ToolLinks />
-      </Box>
-      {image && <img width={'250'} src={image} />}
-    </Stack>
+    <Box my={4}>
+      <ToolBreadcrumb
+        items={[
+          { title: 'All tools', link: '/' },
+          {
+            title: capitalizeFirstLetter(type),
+            link: '/categories/' + type
+          },
+          { title }
+        ]}
+      />
+      <Stack direction={'row'} alignItems={'center'} spacing={2}>
+        <Box>
+          <Typography mb={2} fontSize={30} color={'primary'}>
+            {title}
+          </Typography>
+          <Typography fontSize={20}>{description}</Typography>
+          <ToolLinks />
+        </Box>
+        {image && <img width={'250'} src={image} />}
+      </Stack>
+    </Box>
   );
 }

src/components/ToolLayout.tsx

@@ -7,11 +7,13 @@ export default function ToolLayout({
   children,
   title,
   description,
-  image
+  image,
+  type
 }: {
   title: string;
   description: string;
   image?: string;
+  type: string;
   children: ReactNode;
 }) {
   return (
@@ -25,7 +27,12 @@ export default function ToolLayout({
         <title>{`${title} - Omni Tools`}</title>
       </Helmet>
       <Box width={'85%'}>
-        <ToolHeader title={title} description={description} image={image} />
+        <ToolHeader
+          title={title}
+          description={description}
+          image={image}
+          type={type}
+        />
         {children}
       </Box>
     </Box>