42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Link } from '@tanstack/react-router';
|
|
|
|
export type BreadcrumbItem = {
|
|
label: string;
|
|
to?: string;
|
|
};
|
|
|
|
interface BreadcrumbProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
export default function Breadcrumb({ items }: BreadcrumbProps) {
|
|
return (
|
|
<nav aria-label="Breadcrumb" className="flex items-center space-x-2 text-sm text-gray-500">
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
|
|
return (
|
|
<React.Fragment key={item.label}>
|
|
{item.to && !isLast ? (
|
|
<Link
|
|
to={item.to}
|
|
className="hover:text-gray-900 transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className="text-gray-900 font-medium">{item.label}</span>
|
|
)}
|
|
|
|
{!isLast && (
|
|
<span className="text-gray-400" aria-hidden="true">
|
|
>
|
|
</span>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
} |