breadcrumb

1import * as React from "react"
2import { Slot } from "radix-ui"
3 
4import { cn } from "@/registry/radix-sera/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        "flex flex-wrap items-center gap-1.5 text-xs tracking-wide wrap-break-word text-muted-foreground uppercase sm:gap-2.5",
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 gap-1.5", 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("transition-colors hover:text-foreground", 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("font-normal text-foreground", 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          remixicon="RiArrowRightSLine"
92          className="cn-rtl-flip"
93        />
94      )}
95    </li>
96  )
97}
98 
99function BreadcrumbEllipsis({
100  className,
101  ...props
102}: React.ComponentProps<"span">) {
103  return (
104    <span
105      data-slot="breadcrumb-ellipsis"
106      role="presentation"
107      aria-hidden="true"
108      className={cn(
109        "flex size-5 items-center justify-center [&>svg]:size-4",
110        className
111// … truncated