Breadcrumb

1import { Icon } from "@/lib/icon";
2import { mdiDotsHorizontal, mdiSlashForward } from "@mdi/js";
3import { Slot as SlotPrimitive } from "radix-ui";
4import type * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
9  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
10}
11 
12function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
13  return (
14    <ol
15      data-slot="breadcrumb-list"
16      className={cn(
17        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
18        className,
19      )}
20      {...props}
21    />
22  );
23}
24 
25function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
26  return (
27    <li
28      data-slot="breadcrumb-item"
29      className={cn("inline-flex items-center gap-1.5", className)}
30      {...props}
31    />
32  );
33}
34 
35function BreadcrumbLink({
36  asChild,
37  className,
38  ...props
39}: React.ComponentProps<"a"> & {
40  asChild?: boolean;
41}) {
42  const Comp = asChild ? SlotPrimitive.Slot : "a";
43 
44  return (
45    <Comp
46      data-slot="breadcrumb-link"
47      className={cn("hover:text-foreground transition-colors", className)}
48      {...props}
49    />
50  );
51}
52 
53function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
54  return (
55    <span
56      data-slot="breadcrumb-page"
57      role="link"
58      tabIndex={0}
59      aria-disabled="true"
60      aria-current="page"
61      className={cn("text-foreground font-normal", className)}
62      {...props}
63    />
64  );
65}
66 
67function BreadcrumbSeparator({
68  children,
69  className,
70  ...props
71}: React.ComponentProps<"li">) {
72  return (
73    <li
74      data-slot="breadcrumb-separator"
75      role="presentation"
76      aria-hidden="true"
77      className={cn("[&>svg]:size-3.5", className)}
78      {...props}
79    >
80      {children ?? <Icon path={mdiSlashForward} size={1.5} />}
81    </li>
82  );
83}
84 
85function BreadcrumbEllipsis({
86  className,
87  ...props
88}: React.ComponentProps<"span">) {
89  return (
90    <span
91      data-slot="breadcrumb-ellipsis"
92      role="presentation"
93      aria-hidden="true"
94      className={cn("flex size-9 items-center justify-center", className)}
95      {...props}
96    >
97      <Icon path={mdiDotsHorizontal} size={0.9} className="h-4 w-4" />
98      <span className="sr-only">More</span>
99    </span>
100  );
101}
102 
103export {
104  Breadcrumb,
105  BreadcrumbList,
106  BreadcrumbItem,
107  BreadcrumbLink,
108  BreadcrumbPage,
109  BreadcrumbSeparator,
110// … truncated