Breadcrumbs

'use client'

import { useEffect, useRef, useState } from 'react'
import './breadcrumbs.css'

export interface Crumb { label: string; href: string }
export interface BreadcrumbsProps {
  items: Crumb[]
  maxVisible?: number
  separator?: 'slash' | 'chev'
  fill?: 'dark' | 'light'
  className?: string
}

/** Breadcrumbs with collapsing middle levels. */
export function Breadcrumbs({ items, maxVisible = 4, separator = 'chev', fill = 'dark', className }: BreadcrumbsProps) {
  const [open, setOpen] = useState(false)
  const menu = useRef<HTMLDivElement>(null)
  const collapse = items.length > maxVisible
  const tail = Math.max(1, maxVisible - 1)
  const hidden = collapse ? items.slice(1, items.length - tail) : []
  const shown: (Crumb | 'more')[] = collapse ? [items[0], 'more', ...items.slice(items.length - tail)] : items
  useEffect(() => { if (open) menu.current?.querySelector('a')?.focus() }, [open])
  const sep = <span className="sd-brc__sep" aria-hidden>{separator === 'slash' ? '/' : '›'}</span>
  const stop = (e: React.MouseEvent) => e.preventDefault()
  return (
    <nav aria-label="Breadcrumb" className={['sd-brc', className].filter(Boolean).join(' ')} data-fill={fill} onKeyDown={(e) => e.key === 'Escape' && setOpen(false)}>
      <ol>
        {shown.map((c, i) => (
          <li key={c === 'more' ? 'more' : c.href}>
            {i > 0 && sep}
            {c === 'more' ? (
              <button type="button" className="sd-brc__more" aria-haspopup="menu" aria-expanded={open} aria-label={`Show ${hidden.length} more levels`} onClick={() => setOpen(!open)}>…</button>
            ) : i === shown.length - 1 ? (
              <span className="sd-brc__cur" aria-current="page" title={c.label}>{c.label}</span>
            ) : (
              <a href={c.href} title={c.label} onClick={stop}>{c.label}</a>
            )}
          </li>
        ))}
      </ol>
      {open && (
        <div ref={menu} className="sd-brc__menu" role="menu">
          {hidden.map((c) => <a key={c.href} role="menuitem" href={c.href} onClick={(e) => { stop(e); setOpen(false) }}>{c.label}</a>)}
        </div>
      )}
    </nav>
  )
}

.sd-brc { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-brc[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-brc button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-brc :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-brc .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-brc { position: relative; width: min(100%, 340px); padding: 12px 14px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.sd-brc ol { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.sd-brc li { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13.5px; }
.sd-brc li:last-child { flex: 0 1 auto; }
.sd-brc a, .sd-brc__more { display: block; padding: 4px 6px; border-radius: 7px; color: var(--mute); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; transition: color 150ms, background-color 150ms; }
.sd-brc a:hover, .sd-brc__more:hover, .sd-brc__more[aria-expanded='true'] { color: var(--fg); background: var(--soft) !important; }
.sd-brc__cur { padding: 4px 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-brc__sep { color: var(--mute); opacity: 0.6; font-size: 13px; user-select: none; }
.sd-brc__menu { position: absolute; top: 48px; left: 40px; min-width: 160px; padding: 5px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line), 0 16px 34px -16px rgb(0 0 0 / 0.55); animation: sd-brc-in 160ms ease; z-index: 3; }
@keyframes sd-brc-in { from { opacity: 0; transform: translateY(-4px); } }
.sd-brc__menu a { max-width: none; padding: 8px 10px; color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .sd-brc *, .sd-brc *::before, .sd-brc *::after { animation: none !important; transition: none !important; } }