Section Pill

"use client";

import { IconChevronUp } from "@tabler/icons-react";
import { AnimatePresence, motion, useMotionValue, useReducedMotion, useTransform, type MotionValue } from "motion/react";
import { useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type RefObject } from "react";
import useMeasure from "react-use-measure";
import { cn } from "@/lib/utils";

export type PillSection = { id: string; title: string };

export type SectionPillProps = {
  /** Sections in page order. Each id is the id of an element on the page. */
  sections: PillSection[];
  /** Scrolling element to follow. Defaults to the window. */
  container?: RefObject<HTMLElement | null>;
  /** Distance from the top of the scroller where a section counts as current. */
  offset?: number;
  /** Which edge the pill sits on. The list opens away from it. */
  side?: "bottom" | "top";
  /** Width of the open list in px. Narrow screens get less. */
  panelWidth?: number;
  /** Rows shown before the list scrolls. */
  maxRows?: number;
  /** Accessible name for the pill and the list. */