Pagination

"use client";

import { useLayoutEffect, useRef, useState, type KeyboardEvent } from "react";
import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { IconChevronLeft, IconChevronRight, IconDots } from "@tabler/icons-react";
import { cn } from "@/lib/utils";

// Pagination. The bar always shows the same number of slots, so it never
// changes width as you move. The current-page pill slides from slot to slot,
// and when the window of pages shifts, each slot's number rolls to its new
// value digit by digit like an odometer, up when you go forward and down
// when you go back, so you can see which way you moved.
//
// An ellipsis opens into a small field: type a page and press Enter to jump.
// In a narrow container the slots give way to a rolling "3 / 20".

export type PaginationProps = {
  /** Number of pages. */
  total: number;
  /** Current page, from 1 (controlled). Pair with `onPageChange`. */
  page?: number;
  /** Page on mount (uncontrolled). */
  defaultPage?: number;
  onPageChange?: (page: number) => void;