26 lines
1.1 KiB
TypeScript
26 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface BreadcrumbItem { label: string; href?: string; }
|
|
|
|
export const Breadcrumbs: React.FC<{ items: BreadcrumbItem[]; onNavigate?: (href: string) => void; }> = ({ items, onNavigate }) => (
|
|
<nav className="text-sm text-[--text-secondary]" aria-label="Breadcrumb">
|
|
<ol className="flex flex-wrap items-center gap-1">
|
|
{items.map((item, i) => (
|
|
<li key={i} className="flex items-center">
|
|
{item.href ? (
|
|
<button
|
|
onClick={() => onNavigate?.(item.href!)}
|
|
className="text-blue-600 hover:underline dark:text-blue-400"
|
|
>{item.label}</button>
|
|
) : (
|
|
<span className="text-[--text-primary] font-medium">{item.label}</span>
|
|
)}
|
|
{i < items.length - 1 && <span className="mx-2 text-[--border-color]">/</span>}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
|
|
export default Breadcrumbs;
|