breadcrumb

1import * as React from "react"
2import { mergeProps } from "@base-ui/react/merge-props"
3import { useRender } from "@base-ui/react/use-render"
4 
5import { cn } from "@/registry/base-vega/lib/utils"
6import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
7 
8function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
9  return (
10    <nav
11      aria-label="breadcrumb"
12      data-slot="breadcrumb"
13      className={cn(className)}
14      {...props}
15    />
16  )
17}
18 
19function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
20  return (
21    <ol
22      data-slot="breadcrumb-list"
23      className={cn(
24        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
25        className
26      )}
27      {...props}
28    />
29  )
30}
31 
32function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
33  return (
34    <li
35      data-slot="breadcrumb-item"
36      className={cn("inline-flex items-center gap-1.5", className)}
37      {...props}
38    />
39  )
40}
41 
42function BreadcrumbLink({
43  className,
44  render,
45  ...props
46}: useRender.ComponentProps<"a">) {
47  return useRender({
48    defaultTagName: "a",
49    props: mergeProps<"a">(
50      {
51        className: cn("transition-colors hover:text-foreground", className),
52      },
53      props
54    ),
55    render,
56    state: {
57      slot: "breadcrumb-link",
58    },
59  })
60}
61 
62function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
63  return (
64    <span
65      data-slot="breadcrumb-page"
66      role="link"
67      aria-disabled="true"
68      aria-current="page"
69      className={cn("font-normal text-foreground", className)}
70      {...props}
71    />
72  )
73}
74 
75function BreadcrumbSeparator({
76  children,
77  className,
78  ...props
79}: React.ComponentProps<"li">) {
80  return (
81    <li
82      data-slot="breadcrumb-separator"
83      role="presentation"
84      aria-hidden="true"
85      className={cn("[&>svg]:size-3.5", className)}
86      {...props}
87    >
88      {children ?? (
89        <IconPlaceholder
90          lucide="ChevronRightIcon"
91          tabler="IconChevronRight"
92          hugeicons="ArrowRight01Icon"
93          phosphor="CaretRightIcon"
94          remixicon="RiArrowRightSLine"
95          className="cn-rtl-flip"
96        />
97      )}
98    </li>
99  )
100}
101 
102function BreadcrumbEllipsis({
103  className,
104  ...props
105}: React.ComponentProps<"span">) {
106  return (
107    <span
108      data-slot="breadcrumb-ellipsis"
109      role="presentation"
110      aria-hidden="true"
111      className={cn(
112// … truncated