39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import Link from "next/link";
|
|
|
|
interface BreadcrumbItem {
|
|
label: string;
|
|
href?: string;
|
|
}
|
|
|
|
interface BreadcrumbsProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
export function Breadcrumbs({ items }: BreadcrumbsProps) {
|
|
return (
|
|
<nav aria-label="Breadcrumb" className="mb-6">
|
|
<ol className="flex flex-wrap items-center gap-1.5 text-sm">
|
|
<li>
|
|
<Link href="/" className="text-muted transition-colors hover:text-foreground">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
{items.map((item, i) => (
|
|
<li key={i} className="flex items-center gap-1.5">
|
|
<svg className="h-3.5 w-3.5 text-border" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
{item.href ? (
|
|
<Link href={item.href} className="text-muted transition-colors hover:text-foreground">
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className="font-medium text-foreground">{item.label}</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
}
|