Breadcrumb Icon

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { Home, type LucideIcon } from "lucide-react";
6 
7/* ═══════════════════════════════════════════════════════════
8   Breadcrumb Icon — Magnetic pill-tracking breadcrumb.
9 
10   Flips the cascade metaphor on its head. Instead of dimming
11   everything else when you hover, a soft pill highlight
12   slides TO the item you're pointing at — the highlight
13   comes to you. The hovered icon does a spring micro-bounce
14   for tactile feedback without disturbing its neighbors.
15 
16   Two fundamentally different interaction approaches:
17     • breadcrumb-separator: hover affects OTHER items (cascade)
18     • breadcrumb-icon: hover affects ONLY the target (pill tracks)
19 
20   Curves:
21     • Pill slide: cubic-bezier(0.33, 1.52, 0.58, 1) — spring overshoot
22     • Icon pop:   cubic-bezier(0.34, 1.56, 0.64, 1) — tactile bounce
23   ═══════════════════════════════════════════════════════════ */
24 
25export interface BreadcrumbIconItem {
26  label: string;
27  href?: string;
28  icon?: LucideIcon;
29}
30 
31export interface BreadcrumbIconProps {
32  items: BreadcrumbIconItem[];
33  showHomeIcon?: boolean;
34  iconOnly?: boolean;
35  className?: string;
36}
37 
38export function BreadcrumbIcon({
39  items,
40  showHomeIcon = true,
41  iconOnly = false,
42  className,
43}: BreadcrumbIconProps) {
44  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);
45  const [pill, setPill] = React.useState({ left: 0, width: 0 });
46  const containerRef = React.useRef<HTMLOListElement>(null);
47  const itemRefs = React.useRef<(HTMLElement | null)[]>([]);
48  const hasPositioned = React.useRef(false);
49 
50  const itemsWithIcons = items.map((item, index) => ({
51    ...item,
52    icon: item.icon || (index === 0 && showHomeIcon ? Home : undefined),
53  }));
54 
55  const handleHover = React.useCallback((index: number) => {
56    setHoveredIndex(index);
57    const el = itemRefs.current[index];
58    const container = containerRef.current;
59    if (el && container) {
60      const containerRect = container.getBoundingClientRect();
61      const elRect = el.getBoundingClientRect();
62      setPill({
63        left: elRect.left - containerRect.left,
64        width: elRect.width,
65      });
66    }
67  }, []);
68 
69  React.useEffect(() => {
70// … truncated