style: WIP ui updates

apps/edr-freight-web/backoffice/src/components/ui/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
-import { Fragment } from "react";
+import { Anchor, Breadcrumbs as MantineBreadcrumbs, Text } from "@mantine/core";
+import { ChevronRight } from "lucide-react";
 import { Link } from "react-router-dom";
-import { ChevronRight, Home } from "lucide-react";
 
 export interface BreadcrumbItem {
   label: string;
@@ -12,45 +12,48 @@ export interface BreadcrumbsProps {
 }
 
 export default function Breadcrumbs({ items }: BreadcrumbsProps) {
-  return (
-    <nav
-      aria-label="Breadcrumb"
-      className="flex items-center text-sm text-slate-500"
-    >
-      <Link
-        to="/"
-        aria-label="Home"
-        className="flex items-center transition hover:text-[var(--freight-brand)]"
-      >
-        {/* <Home className="h-4 w-4" /> */}
-        Dashboard
-      </Link>
+  // The dashboard root is always the first crumb; callers pass only the trail
+  // beyond it.
+  const crumbs: BreadcrumbItem[] = [{ label: "Dashboard", href: "/" }, ...items];
 
-      {items.map((item, i) => {
-        const isLast = i === items.length - 1;
+  return (
+    <MantineBreadcrumbs
+      separator={<ChevronRight size={14} aria-hidden />}
+      separatorMargin="xs"
+      styles={{
+        root: { flexWrap: "wrap", rowGap: 4 },
+        separator: { color: "var(--mantine-color-edr-muted-5)" },
+      }}
+    >
+      {crumbs.map((item, index) => {
+        const isLast = index === crumbs.length - 1;
+
+        if (item.href && !isLast) {
+          return (
+            <Anchor
+              key={`${item.label}-${index}`}
+              component={Link}
+              to={item.href}
+              size="sm"
+              c="dimmed"
+            >
+              {item.label}
+            </Anchor>
+          );
+        }
 
         return (
-          <Fragment key={`${item.label}-${i}`}>
-            <ChevronRight className="mx-2 h-4 w-4 text-slate-300" />
-
-            {item.href && !isLast ? (
-              <Link
-                to={item.href}
-                className="transition hover:text-[var(--freight-brand)]"
-              >
-                {item.label}
-              </Link>
-            ) : (
-              <span
-                aria-current={isLast ? "page" : undefined}
-                className="font-medium text-slate-900"
-              >
-                {item.label}
-              </span>
-            )}
-          </Fragment>
+          <Text
+            key={`${item.label}-${index}`}
+            size="sm"
+            fw={isLast ? 600 : 400}
+            c={isLast ? "edr-text" : "dimmed"}
+            aria-current={isLast ? "page" : undefined}
+          >
+            {item.label}
+          </Text>
         );
       })}
-    </nav>
+    </MantineBreadcrumbs>
   );
 }