1
import { ChevronRight } from "lucide-react";
2
import { Link } from "react-router-dom";
3
 
4
interface BreadcrumbItem {
5
  label: string;
6
  href?: string;
7
}
8
 
9
interface BreadcrumbsProps {
10
  items: BreadcrumbItem[];
11
}
12
 
13
export const Breadcrumbs = ({ items }: BreadcrumbsProps) => (
14
  <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 text-sm text-zinc-500">
15
    {items.map((item, index) => {
16
      const isLast = index === items.length - 1;
17
18
      return (
19
        <span key={item.label} className="inline-flex items-center gap-1.5">
20
          {index > 0 ? <ChevronRight aria-hidden="true" className="h-3.5 w-3.5 text-zinc-600" /> : null}
21
          {item.href && !isLast ? (
22
            <Link to={item.href} className="transition-colors hover:text-zinc-200">
23
              {item.label}
24
            </Link>
25
          ) : (
26
            <span aria-current={isLast ? "page" : undefined} className={isLast ? "text-zinc-200" : ""}>
27
              {item.label}
28
            </span>
29
          )}
30
        </span>
31
      );
32
    })}
33
  </nav>
34
);