36 lines
941 B
TypeScript
36 lines
941 B
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
interface BreadcrumbItem {
|
|
label: string;
|
|
to?: string;
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
|
|
return (
|
|
<nav aria-label="breadcrumb" className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1.5">
|
|
{items.map((item, i) => (
|
|
<React.Fragment key={i}>
|
|
{i > 0 && <span className="text-gray-400 dark:text-gray-600">/</span>}
|
|
{item.to ? (
|
|
<Link
|
|
to={item.to}
|
|
className="hover:text-gray-900 dark:hover:text-white transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className="text-gray-900 dark:text-white font-medium">{item.label}</span>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Breadcrumb;
|