38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export type BreadcrumbItem = {
|
|
label: string;
|
|
href?: string;
|
|
};
|
|
|
|
interface BreadcrumbsProps {
|
|
items: BreadcrumbItem[];
|
|
className?: string;
|
|
}
|
|
|
|
export function Breadcrumbs({ items, className }: BreadcrumbsProps) {
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<nav aria-label="Хлебные крошки" className={cn('flex flex-wrap items-center gap-1 text-sm text-muted-foreground', className)}>
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
return (
|
|
<span key={`${item.label}-${index}`} className="inline-flex items-center gap-1">
|
|
{index > 0 && <ChevronRight className="h-3.5 w-3.5 opacity-60" />}
|
|
{item.href && !isLast ? (
|
|
<Link to={item.href} className="hover:text-foreground hover:underline underline-offset-4">
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className={cn(isLast && 'font-medium text-foreground')}>{item.label}</span>
|
|
)}
|
|
</span>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|