1
type BreadcrumbItem = {
2
  name: string;
3
  href?: string | null;
4
};
5
 
6
type BreadcrumbsProps = {
7
  items?: BreadcrumbItem[];
8
  parentHref?: string | null;
9
};
10
 
11
export function Breadcrumbs({ items, parentHref }: BreadcrumbsProps) {
12
  if (!items?.length) {
13
    return null;
14
  }
15
 
16
  return (
17
    <nav
18
      className="mb-4 flex items-center gap-2 rounded-xl bg-zinc-100 dark:bg-zinc-800/30 p-3 text-sm"
19
      aria-label="Breadcrumbs"
20
    >
21
      {parentHref ? (
22
        <>
23
          <a
24
            href={parentHref}
25
            className="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
26
          >
27
            ..
28
          </a>
29
          <span className="text-zinc-400 dark:text-zinc-500">/</span>
30
        </>
31
      ) : null}
32
      {items.map((item, index) => (
33
        <span key={`${item.name}-${index}`}>
34
          {item.href ? <a href={item.href}>{item.name}</a> : <strong>{item.name}</strong>}
35
          {index < items.length - 1 ? " / " : null}
36
        </span>
37
      ))}
38
    </nav>
39
  );
40
}