wip

apps/website/components/alpha/Breadcrumbs.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+}
+
+export default function Breadcrumbs({ items }: BreadcrumbsProps) {
+  const router = useRouter();
+
+  return (
+    <nav className="flex items-center gap-2 text-sm mb-6">
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        return (
+          <div key={index} className="flex items-center gap-2">
+            {item.href && !isLast ? (
+              <button
+                onClick={() => router.push(item.href!)}
+                className="text-gray-400 hover:text-primary-blue transition-colors"
+              >
+                {item.label}
+              </button>
+            ) : (
+              <span className={isLast ? 'text-white font-medium' : 'text-gray-400'}>
+                {item.label}
+              </span>
+            )}
+            
+            {!isLast && (
+              <svg 
+                className="w-4 h-4 text-gray-600" 
+                fill="none" 
+                viewBox="0 0 24 24" 
+                stroke="currentColor"
+              >
+                <path 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                  strokeWidth={2} 
+                  d="M9 5l7 7-7 7" 
+                />
+              </svg>
+            )}
+          </div>
+        );
+      })}
+    </nav>
+  );
+}