Glass Breadcrumb

1"use client"
2 
3import * as React from "react"
4import { ChevronRight, MoreHorizontal } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7const GlassBreadcrumb = React.forwardRef<
8  HTMLElement,
9  React.ComponentPropsWithoutRef<"nav"> & {
10    separator?: React.ReactNode
11  }
12>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
13GlassBreadcrumb.displayName = "GlassBreadcrumb"
14 
15const GlassBreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
16  ({ className, ...props }, ref) => (
17    <ol
18      ref={ref}
19      className={cn(
20        "flex flex-wrap items-center gap-1.5 wrap-break-words text-sm",
21        "px-4 py-2 rounded-xl",
22        "bg-white/5 backdrop-blur-xl border border-white/10",
23        className,
24      )}
25      {...props}
26    />
27  ),
28)
29GlassBreadcrumbList.displayName = "GlassBreadcrumbList"
30 
31const GlassBreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
32  ({ className, ...props }, ref) => (
33    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
34  ),
35)
36GlassBreadcrumbItem.displayName = "GlassBreadcrumbItem"
37 
38const GlassBreadcrumbLink = React.forwardRef<
39  HTMLAnchorElement,
40  React.ComponentPropsWithoutRef<"a"> & {
41    asChild?: boolean
42  }
43>(({ asChild, className, ...props }, ref) => {
44  return (
45    <a
46      ref={ref}
47      className={cn(
48        "text-white/60 transition-colors duration-200",
49        "hover:text-white hover:underline underline-offset-4",
50        "focus:outline-none focus:text-white",
51        className,
52      )}
53      {...props}
54    />
55  )
56})
57GlassBreadcrumbLink.displayName = "GlassBreadcrumbLink"
58 
59const GlassBreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
60  ({ className, ...props }, ref) => (
61    <span
62      ref={ref}
63      role="link"
64      aria-disabled="true"
65      aria-current="page"
66      className={cn("font-medium text-white", className)}
67      {...props}
68    />
69  ),
70)
71GlassBreadcrumbPage.displayName = "GlassBreadcrumbPage"
72 
73const GlassBreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
74  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5 text-white/40", className)} {...props}>
75    {children ?? <ChevronRight />}
76  </li>
77)
78GlassBreadcrumbSeparator.displayName = "GlassBreadcrumbSeparator"
79 
80const GlassBreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
81// … truncated