Breadcrumbs

1'use client'
2 
3import { forwardRef, useMemo, type HTMLAttributes, type ReactNode } from 'react'
4import { cva, type VariantProps } from 'class-variance-authority'
5import { cn } from '@/lib/utils'
6import { playHoverSound } from '@/lib/sound'
7 
8export interface BreadcrumbItem {
9  label: ReactNode
10  href?: string
11  icon?: ReactNode
12  title?: string
13}
14 
15const breadcrumbVariants = cva('flex items-center', {
16  variants: {
17    variant: {
18      default: '',
19      muted: '',
20    },
21    size: {
22      sm: 'text-[11px] gap-1',
23      md: 'text-sm gap-1.5',
24      lg: 'text-base gap-2',
25    },
26  },
27  defaultVariants: {
28    variant: 'default',
29    size: 'md',
30  },
31})
32 
33export interface BreadcrumbsProps
34  extends Omit<HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof breadcrumbVariants> {
35  items: BreadcrumbItem[]
36  maxItems?: number
37  separator?: ReactNode
38  siteUrl?: string
39  'aria-label'?: string
40  listClassName?: string
41}
42 
43const DefaultSeparator = () => (
44  <span
45    className="inline-flex translate-y-px shrink-0 items-center justify-center text-(--color-subtle)"
46    aria-hidden="true"
47  >
48    <svg
49      width="12"
50      height="12"
51      viewBox="0 0 12 12"
52      fill="none"
53      stroke="currentColor"
54      strokeWidth="1.5"
55      strokeLinecap="round"
56      strokeLinejoin="round"
57    >
58      <path d="M4.5 2.5l3 3.5-3 3.5" />
59    </svg>
60  </span>
61)
62 
63export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
64  (
65    {
66      items,
67      maxItems = 4,
68      separator,
69      siteUrl,
70      'aria-label': ariaLabel = 'Breadcrumb',
71      variant,
72      size,
73      className,
74      listClassName,
75      ...props
76    },
77    ref,
78  ) => {
79    const sep = separator ?? <DefaultSeparator />
80 
81    const { visibleItems, collapsedItems } = useMemo(() => {
82      if (!maxItems || items.length <= maxItems) {
83        return { visibleItems: items, collapsedItems: [] }
84      }
85      const keep = maxItems - 2
86      return {
87        visibleItems: [items[0], ...items.slice(-keep)],
88        collapsedItems: items.slice(1, items.length - keep),
89      }
90    }, [items, maxItems])
91 
92    const hasEllipsis = collapsedItems.length > 0
93 
94    const jsonLd = useMemo(() => {
95      if (!siteUrl) return null
96      return {
97        '@context': 'https://schema.org',
98        '@type': 'BreadcrumbList',
99        itemListElement: items.map((item, i) => ({
100          '@type': 'ListItem',
101          position: i + 1,
102          name: typeof item.label === 'string' ? item.label : '',
103// … truncated