Breadcrumb

1"use client";
2 
3import { Slot } from "@radix-ui/react-slot";
4import { ChevronRight, MoreHorizontal } from "lucide-react";
5import { forwardRef } from "react";
6import { cn } from "@/lib/utils";
7 
8export function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
9  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
10}
11 
12export function BreadcrumbList({
13  className,
14  ...props
15}: React.ComponentProps<"ol">) {
16  return (
17    <ol
18      data-slot="breadcrumb-list"
19      className={cn(
20        // Frosted glass bar — visible white fill + top highlight so it reads as
21        // glass on light backgrounds rather than flat grey.
22        "relative flex w-fit flex-wrap items-center gap-1 break-words rounded-full border border-black/[0.06] bg-white/45 px-3.5 py-1.5 text-sm text-current/80 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.7),0_6px_20px_rgba(0,0,0,0.06)] backdrop-blur-xl dark:border-white/12 dark:bg-white/[0.07] dark:text-current/75 dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.16),0_8px_24px_rgba(0,0,0,0.3)]",
23        className,
24      )}
25      {...props}
26    />
27  );
28}
29 
30export function BreadcrumbItem({
31  className,
32  ...props
33}: React.ComponentProps<"li">) {
34  return (
35    <li
36      data-slot="breadcrumb-item"
37      className={cn("inline-flex items-center gap-1.5", className)}
38      {...props}
39    />
40  );
41}
42 
43export const BreadcrumbLink = forwardRef<
44  HTMLAnchorElement,
45  React.ComponentProps<"a"> & { asChild?: boolean }
46>(({ asChild, className, ...props }, ref) => {
47  const Comp = asChild ? Slot : "a";
48  return (
49    <Comp
50      ref={ref}
51      data-slot="breadcrumb-link"
52      className={cn(
53        "rounded-full px-2 py-0.5 transition-colors hover:bg-black/[0.06] hover:text-current dark:hover:bg-white/10",
54        className,
55      )}
56      {...props}
57    />
58  );
59});
60BreadcrumbLink.displayName = "BreadcrumbLink";
61 
62export function BreadcrumbPage({
63  className,
64  ...props
65}: React.ComponentProps<"span">) {
66  return (
67    <span
68      data-slot="breadcrumb-page"
69      role="link"
70      aria-disabled="true"
71      aria-current="page"
72      className={cn(
73        "rounded-full border border-black/[0.05] bg-white/70 px-2 py-0.5 font-medium text-current shadow-sm dark:border-white/10 dark:bg-white/[0.14]",
74        className,
75      )}
76      {...props}
77    />
78  );
79}
80 
81export function BreadcrumbSeparator({
82  children,
83  className,
84  ...props
85}: React.ComponentProps<"li">) {
86  return (
87    <li
88      data-slot="breadcrumb-separator"
89// … truncated