wip

apps/website/components/layout/Breadcrumbs.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import Link from 'next/link';
+
+export type BreadcrumbItem = {
+  label: string;
+  href?: string;
+};
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export default function Breadcrumbs({ items, className }: BreadcrumbsProps) {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  const lastIndex = items.length - 1;
+
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className={className ?? 'text-sm text-gray-400 mb-4'}
+    >
+      <ol className="flex items-center gap-2 flex-wrap">
+        {items.map((item, index) => {
+          const isLast = index === lastIndex;
+          const content = item.href && !isLast ? (
+            <Link
+              href={item.href}
+              className="hover:text-primary-blue transition-colors"
+            >
+              {item.label}
+            </Link>
+          ) : (
+            <span className={isLast ? 'text-white' : ''}>{item.label}</span>
+          );
+
+          return (
+            <li key={`${item.label}-${index}`} className="flex items-center gap-2">
+              {index > 0 && (
+                <span className="text-gray-600">/</span>
+              )}
+              {content}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}