Breadcrumb Nav

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface BreadcrumbItem {
7  active?: boolean;
8  href?: string;
9  label: string;
10}
11 
12interface BreadcrumbNavProps extends React.HTMLAttributes<HTMLElement> {
13  items: BreadcrumbItem[];
14  separator?: "chevron" | "slash" | "dot";
15}
16 
17function SeparatorIcon({ type }: { type: string }) {
18  if (type === "slash") {
19    return <span className="font-mono text-[10px] text-foreground/20">/</span>;
20  }
21  if (type === "dot") {
22    return <span className="h-1 w-1 rounded-full bg-foreground/20" />;
23  }
24  // chevron
25  return (
26    <svg
27      aria-hidden="true"
28      width="10"
29      height="10"
30      viewBox="0 0 10 10"
31      fill="none"
32      className="text-foreground/20"
33    >
34      <path
35        d="M3.5 2l3.5 3-3.5 3"
36        stroke="currentColor"
37        strokeWidth="1.2"
38        strokeLinecap="round"
39        strokeLinejoin="round"
40      />
41    </svg>
42  );
43}
44 
45export function BreadcrumbNav({
46  items,
47  separator = "chevron",
48  className,
49  ...props
50}: BreadcrumbNavProps) {
51  return (
52    <nav
53      data-slot="tron-breadcrumb"
54      aria-label="Breadcrumb"
55      className={cn(
56        "inline-flex items-center gap-2 rounded border border-primary/20 bg-card/80 px-3 py-1.5 backdrop-blur-sm",
57        className
58      )}
59      {...props}
60    >
61      {items.map((item, i) => (
62        <React.Fragment key={i}>
63          {i > 0 && (
64            <span className="flex items-center">
65              <SeparatorIcon type={separator} />
66            </span>
67          )}
68          {item.active ? (
69            <span className="font-mono text-[10px] text-primary uppercase tracking-widest">
70              {item.label}
71            </span>
72          ) : item.href ? (
73            <a
74              href={item.href}
75              className="font-mono text-[10px] text-foreground/40 uppercase tracking-widest transition-colors hover:text-primary"
76            >
77              {item.label}
78            </a>
79          ) : (
80            <span className="font-mono text-[10px] text-foreground/40 uppercase tracking-widest">
81              {item.label}
82            </span>
83          )}
84        </React.Fragment>
85      ))}
86    </nav>
87  );
88}