Issue 14: Breadcrumb Component

client/src/app/test/breadcrumb/page.tsx

@@ -0,0 +1,16 @@
+import Breadcrumb from "@/components/ui/breadcrumb";
+
+export default function TestPage() {
+  return (
+    <div className="space-y-8 p-6">
+      <h1 className="text-2xl font-bold">Breadcrumb Test</h1>
+
+      <Breadcrumb
+        items={[
+          { label: "Find my booking", href: "/" },
+          { label: "List of Bookings" },
+        ]}
+      />
+    </div>
+  );
+}

client/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import React from "react";
+
+export type BreadcrumbItem = {
+  label: string;
+  href?: string;
+};
+
+type BreadcrumbProps = {
+  items: BreadcrumbItem[];
+  className?: string;
+};
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({ items, className }) => {
+  if (!items?.length) return null;
+
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ul className="flex flex-wrap items-center gap-2 text-sm">
+        {items.map((item, i) => {
+          const last = i === items.length - 1;
+
+          return (
+            <li key={`${item.label}-${i}`} className="flex items-center gap-2">
+              {!last && item.href ? (
+                <Link
+                  href={item.href}
+                  className="underline-offset-2 hover:underline"
+                >
+                  {item.label}
+                </Link>
+              ) : (
+                <span
+                  style={last ? { color: "var(--bloom-orbit)" } : undefined}
+                >
+                  {item.label}
+                </span>
+              )}
+              {!last && <span>/</span>}
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};
+
+export default Breadcrumb;