Pagination

const SIBLINGS = 1; // pages shown on each side of the current one
const NAV =
  'flex items-center gap-1 text-sm font-medium *:flex *:h-9 *:min-w-9 *:items-center *:justify-center *:rounded-lg *:px-3 *:tabular-nums *:enabled:not-aria-[current]:hover:bg-muted *:disabled:opacity-40 *:aria-[current=page]:bg-primary *:aria-[current=page]:text-primary-foreground';

// 1 … 4 5 6 … 20: always the first and last page, plus the current page's neighbors.
function pageItems(current: number, total: number) {
  const items: (number | 'gap')[] = [];
  for (let page = 1; page <= total; page++) {
    if (page === 1 || page === total || Math.abs(page - current) <= SIBLINGS)
      items.push(page);
    else if (items.at(-1) !== 'gap') items.push('gap');
  }
  return items;
}

type Props = { page: number; pages: number; onChange: (page: number) => void };

// Keep the page in the URL (?page=3) in the parent so it survives a refresh.
export function Pagination({ page, pages, onChange }: Props) {
  return (
    <nav aria-label='Pagination' className={NAV}>
      <button disabled={page === 1} onClick={() => onChange(page - 1)}>
        Previous
      </button>
      {pageItems(page, pages).map((item, index) =>
        item === 'gap' ? (
          <span key={`gap-${index}`}>…</span>
        ) : (
          <button
            key={item}
            aria-current={item === page ? 'page' : undefined}
            onClick={() => onChange(item)}
          >
            {item}
          </button>
        )
      )}
      <button disabled={page === pages} onClick={() => onChange(page + 1)}>
        Next
      </button>
    </nav>
  );
}