40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import Link from "next/link";
|
|
|
|
export type Crumb = {
|
|
label: string;
|
|
href?: string;
|
|
};
|
|
|
|
export default function Breadcrumb({ items }: { items: Crumb[] }) {
|
|
return (
|
|
<nav aria-label="مسیر صفحه" className="mb-3">
|
|
<ol className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
return (
|
|
<li key={`${item.label}-${index}`} className="flex items-center gap-2">
|
|
{index > 0 ? (
|
|
<span aria-hidden className="text-muted/50">
|
|
/
|
|
</span>
|
|
) : null}
|
|
{item.href && !isLast ? (
|
|
<Link
|
|
href={item.href}
|
|
className="transition-colors hover:text-ink"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className={isLast ? "text-ink" : undefined}>
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
}
|