Ubuntu
116 lines
2.8 KiB
TypeScript
116 lines
2.8 KiB
TypeScript
import * as React from "react"
|
|
import { Slot } from "@radix-ui/react-slot"
|
|
import { ChevronRight, MoreHorizontal } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const BreadcrumbRoot = React.forwardRef<
|
|
HTMLElement,
|
|
React.ComponentPropsWithoutRef<"nav">
|
|
>(({ className, ...props }, ref) => (
|
|
<nav
|
|
ref={ref}
|
|
aria-label="breadcrumb"
|
|
className={cn("w-full text-sm", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
BreadcrumbRoot.displayName = "Breadcrumb"
|
|
|
|
const BreadcrumbList = React.forwardRef<
|
|
HTMLOListElement,
|
|
React.ComponentPropsWithoutRef<"ol">
|
|
>(({ className, ...props }, ref) => (
|
|
<ol
|
|
ref={ref}
|
|
className={cn(
|
|
"flex flex-wrap items-center gap-1.5 sm:gap-2.5 text-muted-foreground",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
BreadcrumbList.displayName = "BreadcrumbList"
|
|
|
|
const BreadcrumbItem = React.forwardRef<
|
|
HTMLLIElement,
|
|
React.ComponentPropsWithoutRef<"li">
|
|
>(({ className, ...props }, ref) => (
|
|
<li ref={ref} className={cn("inline-flex items-center", className)} {...props} />
|
|
))
|
|
BreadcrumbItem.displayName = "BreadcrumbItem"
|
|
|
|
const BreadcrumbLink = React.forwardRef<
|
|
HTMLAnchorElement,
|
|
React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }
|
|
>(({ asChild, className, ...props }, ref) => {
|
|
const Comp = asChild ? Slot : "a"
|
|
return (
|
|
<Comp
|
|
ref={ref}
|
|
className={cn(
|
|
"font-medium transition-colors hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring rounded-sm",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
BreadcrumbLink.displayName = "BreadcrumbLink"
|
|
|
|
const BreadcrumbPage = React.forwardRef<
|
|
HTMLSpanElement,
|
|
React.ComponentPropsWithoutRef<"span">
|
|
>(({ className, ...props }, ref) => (
|
|
<span
|
|
ref={ref}
|
|
aria-current="page"
|
|
className={cn("text-foreground font-semibold", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
BreadcrumbPage.displayName = "BreadcrumbPage"
|
|
|
|
const BreadcrumbSeparator = ({
|
|
children,
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"li">) => (
|
|
<li
|
|
role="presentation"
|
|
aria-hidden="true"
|
|
className={cn("text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", className)}
|
|
{...props}
|
|
>
|
|
{children ?? <ChevronRight />}
|
|
</li>
|
|
)
|
|
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
|
|
|
|
const BreadcrumbEllipsis = ({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"span">) => (
|
|
<span
|
|
role="presentation"
|
|
className={cn("flex h-9 w-9 items-center justify-center", className)}
|
|
{...props}
|
|
>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
<span className="sr-only">More</span>
|
|
</span>
|
|
)
|
|
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
|
|
|
|
const Breadcrumb = Object.assign(BreadcrumbRoot, {
|
|
List: BreadcrumbList,
|
|
Item: BreadcrumbItem,
|
|
Link: BreadcrumbLink,
|
|
Page: BreadcrumbPage,
|
|
Separator: BreadcrumbSeparator,
|
|
Ellipsis: BreadcrumbEllipsis,
|
|
})
|
|
|
|
export { Breadcrumb }
|
|
|
|
|