50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import Link from 'next/link';
|
|
import React from 'react';
|
|
|
|
interface BreadcrumbItem {
|
|
label: string;
|
|
href?: string;
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
export function Breadcrumb({ items }: BreadcrumbProps) {
|
|
return (
|
|
<nav className="px-6 py-2 bg-white border-b border-gray-200" aria-label="Breadcrumb">
|
|
<ol className="flex flex-wrap items-center space-x-2 text-xs text-gray-500">
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
|
|
return (
|
|
<React.Fragment key={index}>
|
|
{index > 0 && (
|
|
<li aria-hidden="true" className="mx-1 text-gray-400">
|
|
/
|
|
</li>
|
|
)}
|
|
<li>
|
|
{isLast ? (
|
|
<span className="font-semibold text-gray-700" aria-current="page">
|
|
{item.label}
|
|
</span>
|
|
) : item.href ? (
|
|
<Link
|
|
href={item.href}
|
|
className="hover:text-blue-600 transition-colors focus-ring rounded"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span>{item.label}</span>
|
|
)}
|
|
</li>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
}
|