Collapsing Breadcrumb

"use client";

import { IconChevronRight, IconDots } from "@tabler/icons-react";
import { motion, useReducedMotion } from "motion/react";
import {
  Fragment,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
  type ElementType,
  type MouseEvent,
  type ReactNode,
} from "react";
import { cn } from "@/lib/utils";

// Critically damped, so a fold that reverses mid-way keeps its velocity and
// settles without overshoot.
const FOLD = { type: "spring", duration: 0.4, bounce: 0 } as const;
const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
const HOVER_OPEN = 80;
const HOVER_CLOSE = 320;

export type BreadcrumbItem = {