a37f030d-6e8a-4f3d-9f23-1ce03c0e604b/research/replit/breadcrumb.md

import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ReactNode }

(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />) Breadcrumb.displayName = "Breadcrumb"

const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<"ol">

(({ className, ...props }, ref) => (

)) BreadcrumbList.displayName = "BreadcrumbList"

const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<"li">

(({ className, ...props }, ref) => (

1. )) 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("transition-colors hover:text-foreground", className)} {...props} /> ) }) BreadcrumbLink.displayName = "BreadcrumbLink"

   const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<"span">

   (({ className, ...props }, ref) => ( <span ref={ref} role="link" aria-disabled="true" aria-current="page" className={cn("font-normal text-foreground", className)} {...props} /> )) BreadcrumbPage.displayName = "BreadcrumbPage"

   const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (

2. svg]:w-3.5 [&>svg]:h-3.5", className)} {...props} > {children ?? }
) BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( <span role="presentation" aria-hidden="true" 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>

) BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"

export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, }