Breadcrumb

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