53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
export type BreadcrumbItem = {
|
|
label: string;
|
|
href?: string;
|
|
};
|
|
|
|
interface BreadcrumbsProps {
|
|
items: BreadcrumbItem[];
|
|
className?: string;
|
|
}
|
|
|
|
export default function Breadcrumbs({ items, className }: BreadcrumbsProps) {
|
|
if (!items || items.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const lastIndex = items.length - 1;
|
|
|
|
return (
|
|
<nav
|
|
aria-label="Breadcrumb"
|
|
className={className ?? 'text-sm text-gray-400 mb-4'}
|
|
>
|
|
<ol className="flex items-center gap-2 flex-wrap">
|
|
{items.map((item, index) => {
|
|
const isLast = index === lastIndex;
|
|
const content = item.href && !isLast ? (
|
|
<Link
|
|
href={item.href}
|
|
className="hover:text-primary-blue transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className={isLast ? 'text-white' : ''}>{item.label}</span>
|
|
);
|
|
|
|
return (
|
|
<li key={`${item.label}-${index}`} className="flex items-center gap-2">
|
|
{index > 0 && (
|
|
<span className="text-gray-600">/</span>
|
|
)}
|
|
{content}
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
} |