39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import './Breadcrumb.css';
|
|
|
|
interface BreadcrumbItem {
|
|
label: string;
|
|
href?: string;
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
items: BreadcrumbItem[];
|
|
className?: string;
|
|
}
|
|
|
|
export function Breadcrumb({ items, className = '' }: BreadcrumbProps) {
|
|
return (
|
|
<nav className={`breadcrumb ${className}`.trim()} aria-label="Breadcrumb">
|
|
<ol className="breadcrumb__list">
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
return (
|
|
<li key={index} className="breadcrumb__item">
|
|
{!isLast && item.href ? (
|
|
<>
|
|
<Link to={item.href} className="breadcrumb__link">
|
|
{item.label}
|
|
</Link>
|
|
<span className="breadcrumb__separator">/</span>
|
|
</>
|
|
) : (
|
|
<span className="breadcrumb__current">{item.label}</span>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
}
|