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