Table of Content

import TableOfContent from "@/components/ui/table-of-content";

const items = [
  {
    id: "interaction-geometry",
    title: "Define the interaction geometry · 01",
    description:
      "Map the rail, tick spacing, preview anchor, and safe component bounds.",
  },
  {
    id: "pointer-selection",
    title: "Connect pointer position to selection · 02",
    description:
      "Choose the nearest record while preserving a continuous visual center.",
  },
  {
    id: "tick-spring",
    title: "Tune the tick spring · 03",
    description:
      "Keep magnification interruptible, quick, and close to critical damping.",
  },
  {
    id: "content-transitions",
    title: "Keep content transitions crisp · 04",
    description:
      "Replace title and description immediately without blur or decorative effects.",
  },
  {
    id: "measure-card",
    title: "Measure the card from typography · 05",
    description:
      "Let font metrics, wrapping, spacing, and padding determine card height.",
  },
  {
    id: "clamp-preview",
    title: "Clamp the preview at both edges · 06",
    description:
      "Keep every card inside the component while maintaining its visual anchor.",
  },
  {
    id: "touch-input",
    title: "Support direct touch input · 07",
    description:
      "Use Pointer Capture so scrubbing continues reliably through the gesture.",
  },
  {
    id: "keyboard-navigation",
    title: "Complete keyboard navigation · 08",
    description:
      "Arrow keys move by item, Home and End jump, and Escape closes the preview.",
  },
  {
    id: "reduced-motion",
    title: "Respect reduced motion · 09",
    description:
      "Preserve immediate selection while removing spatial interpolation.",
  },
  {
    id: "lifecycle-cleanup",
    title: "Verify lifecycle cleanup · 10",
    description:
      "Release observers, timers, listeners, and animation frames on disconnect.",
  },
];

export default function TableOfContentDemo() {
  return (
    <TableOfContent
      items={items}
      label="Document contents"
      value={4}
      open
    />
  );
}