57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export interface BreadcrumbItem {
|
|
label: string;
|
|
href?: string;
|
|
}
|
|
|
|
interface BreadcrumbsProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
export default function Breadcrumbs({ items }: BreadcrumbsProps) {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<nav className="flex items-center gap-2 text-sm mb-6">
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
|
|
return (
|
|
<div key={index} className="flex items-center gap-2">
|
|
{item.href && !isLast ? (
|
|
<button
|
|
onClick={() => router.push(item.href!)}
|
|
className="text-gray-400 hover:text-primary-blue transition-colors"
|
|
>
|
|
{item.label}
|
|
</button>
|
|
) : (
|
|
<span className={isLast ? 'text-white font-medium' : 'text-gray-400'}>
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
|
|
{!isLast && (
|
|
<svg
|
|
className="w-4 h-4 text-gray-600"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
} |