40 lines
933 B
TypeScript
40 lines
933 B
TypeScript
|
import Link from 'next/link';
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
interface BreadcrumbItem {
|
||
|
|
label: string;
|
||
|
|
href?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface BreadcrumbProps {
|
||
|
|
items: BreadcrumbItem[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Breadcrumb({ items }: BreadcrumbProps) {
|
||
|
|
return (
|
||
|
|
<nav aria-label="breadcrumb" className="mb-3">
|
||
|
|
<ol className="breadcrumb">
|
||
|
|
{items.map((item, index) => {
|
||
|
|
const isLast = index === items.length - 1;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<li
|
||
|
|
key={index}
|
||
|
|
className={`breadcrumb-item ${isLast ? 'active' : ''}`}
|
||
|
|
aria-current={isLast ? 'page' : undefined}
|
||
|
|
>
|
||
|
|
{isLast ? (
|
||
|
|
item.label
|
||
|
|
) : (
|
||
|
|
<Link href={item.href || '#'} className="text-decoration-none">
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</ol>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|