Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 598x 1541x | import { Fragment } from "react";
import { Link } from "@tanstack/react-router";
import { ChevronRight } from "lucide-react";
interface BreadcrumbItem {
label: string;
href?: string;
}
export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
return (
<nav aria-label="Breadcrumb" className="flex items-center gap-1.5 text-sm text-foreground-muted mb-4">
{items.map((item) => (
<Fragment key={item.label}>
{item.href && <ChevronRight className="h-3.5 w-3.5 text-foreground-subtle flex-shrink-0" />}
{item.href ? (
<Link to={item.href} className="hover:text-foreground-default transition-colors">
{item.label}
</Link>
) : (
<span className="text-foreground-default font-medium truncate">{item.label}</span>
)}
</Fragment>
))}
</nav>
);
}
|