37 lines
1002 B
TypeScript
37 lines
1002 B
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
|
|
export interface BreadcrumbItem {
|
|
name: string;
|
|
url: string;
|
|
}
|
|
|
|
interface BreadcrumbsProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
export default function Breadcrumbs({ items }: BreadcrumbsProps) {
|
|
return (
|
|
<nav aria-label="Breadcrumb" className="mb-6">
|
|
<ol className="flex items-center space-x-2 text-sm text-gray-600">
|
|
{items.map((item, index) => (
|
|
<li key={item.url} className="flex items-center">
|
|
{index > 0 && <span className="mx-2">/</span>}
|
|
{index === items.length - 1 ? (
|
|
<span className="font-semibold text-gray-900" aria-current="page">
|
|
{item.name}
|
|
</span>
|
|
) : (
|
|
<Link href={item.url} className="hover:text-blue-600 transition-colors">
|
|
{item.name}
|
|
</Link>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
export { type BreadcrumbItem as BreadcrumbItemType };
|