breadcrumb

1import * as React from "react"
2import { Slot } from "radix-ui"
3 
4import { cn } from "@/registry/bases/radix/lib/utils"
5import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
6 
7function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
8  return (
9    <nav
10      aria-label="breadcrumb"
11      data-slot="breadcrumb"
12      className={cn(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 gap-1.5 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("gap-1 inline-flex items-center", 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("[&>svg]:size-3.5", className)}
83      {...props}
84    >
85      {children ?? (
86        <IconPlaceholder
87          lucide="ChevronRightIcon"
88          tabler="IconChevronRight"
89          hugeicons="ArrowRight01Icon"
90          phosphor="CaretRightIcon"
91        />
92      )}
93    </li>
94  )
95}
96 
97function BreadcrumbEllipsis({
98  className,
99  ...props
100}: React.ComponentProps<"span">) {
101  return (
102    <span
103      data-slot="breadcrumb-ellipsis"
104      role="presentation"
105      aria-hidden="true"
106      className={cn(
107        "size-5 [&>svg]:size-4 flex items-center justify-center",
108        className
109      )}
110      {...props}
111    >
112      <IconPlaceholder
113        lucide="MoreHorizontalIcon"
114// … truncated