feat: 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>
   );
 }