All files / shared / components Breadcrumb.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
55x
 
 
36x
 
 
 
 
118x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
interface BreadcrumbItem {
  label: string
  href?: string
}
 
interface BreadcrumbProps {
  items: BreadcrumbItem[]
}
 
export function Breadcrumb({ items }: BreadcrumbProps) {
  return (
    <nav aria-label="Breadcrumb" className="mb-4 text-sm text-muted-foreground">
      <ol className="flex items-center gap-2">
        {items.map((item, i) => (
          <li key={i} className="flex items-center gap-2">
            {i > 0 && <span className="text-muted-foreground/40">/</span>}
            {item.href && i < items.length - 1 ? (
              <a href={`#${item.href}`} className="hover:text-foreground">
                {item.label}
              </a>
            ) : (
              <span className={i === items.length - 1 ? 'text-foreground' : ''}>
                {item.label}
              </span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}