Breadcrumb

import { ChevronRight, Home } from "lucide-react";

type Crumb = { label: string; href?: string };

export function Breadcrumb({ items }: { items: Crumb[] }) {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex flex-wrap items-center gap-0.5 text-[13.5px]">
        <li>
          <a href="/" aria-label="Home" className="inline-flex rounded-sm px-1.5 py-0.5 text-fg-muted hover:bg-surface-2 hover:text-fg">
            <Home className="size-[15px]" aria-hidden />
          </a>
        </li>
        {items.map((item, i) => {
          const last = i === items.length - 1;
          return (
            <li key={item.label} className="inline-flex min-w-0 items-center gap-0.5">
              <ChevronRight className="size-3.5 text-fg-subtle" aria-hidden />
              {last || !item.href ? (
                <span aria-current={last ? "page" : undefined} className="px-1.5 py-0.5 font-medium text-fg">{item.label}</span>
              ) : (
                <a href={item.href} className="rounded-sm px-1.5 py-0.5 text-fg-muted transition hover:bg-surface-2 hover:text-fg">
                  {item.label}
                </a>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

// <Breadcrumb items={[{ label: "Customers", href: "/customers" }, { label: "Kaveri Foods", href: "/customers/kaveri" }, { label: "INV-1042" }]} />