Convert breadcrumbs into router links to support cmd/ctrl-click

Signed-off-by: Andrew Sawers <ajmsawers@gmail.com>

Author: ajmsawers

src/components/Breadcrumbs/FFBreadcrumb.tsx

@@ -1,37 +1,61 @@
 import { Breadcrumbs, Link, Typography } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import { IFFBreadcrumb } from '../../interfaces';
 
 interface Props {
   breadcrumbs: IFFBreadcrumb[];
 }
 
 export const FFBreadcrumb: React.FC<Props> = ({ breadcrumbs }) => {
-  const navigate = useNavigate();
-
   return (
     <Breadcrumbs>
-      {breadcrumbs.map((b, idx) => (
-        <Link
-          key={idx}
-          underline={idx !== breadcrumbs.length - 1 ? 'hover' : 'none'}
-          color={idx !== breadcrumbs.length - 1 ? 'inherit' : 'text.primary'}
-          sx={{
-            cursor: idx !== breadcrumbs.length - 1 ? 'pointer' : 'default',
-          }}
-          onClick={b.link ? () => navigate(b.link ?? '') : undefined}
-        >
-          <Typography
-            variant="h5"
+      {breadcrumbs.map((b, idx) => {
+        const isLast = idx === breadcrumbs.length - 1;
+        const link = b.link;
+        if (link && !isLast) {
+          return (
+            <Link
+              key={idx}
+              component={RouterLink}
+              to={link}
+              underline="hover"
+              color="inherit"
+              sx={{ cursor: 'pointer' }}
+            >
+              <Typography
+                variant="h5"
+                sx={{
+                  fontWeight: 'bold',
+                  fontSize: '14',
+                }}
+              >
+                {b.content}
+              </Typography>
+            </Link>
+          );
+        }
+
+        return (
+          <Link
+            key={idx}
+            underline={!isLast ? 'hover' : 'none'}
+            color={!isLast ? 'inherit' : 'text.primary'}
             sx={{
-              fontWeight: 'bold',
-              fontSize: '14',
+              cursor: 'default',
             }}
           >
-            {b.content}
-          </Typography>
-        </Link>
-      ))}
+            <Typography
+              variant="h5"
+              sx={{
+                fontWeight: 'bold',
+                fontSize: '14',
+              }}
+            >
+              {b.content}
+            </Typography>
+          </Link>
+        );
+      })}
     </Breadcrumbs>
   );
 };