Pagination

function PaginationPattern() {
  const [page, setPage] = useState(4);
  const pages = getVisiblePages(page, TOTAL_PAGES);

  return (
    <nav aria-label="Pagination">
      <button disabled={page === 1} onClick={() => setPage(p => p - 1)}>
        Previous
      </button>
      {pages.map((entry, i) =>
        entry === "ellipsis" ? (
          <span key={i} aria-hidden="true">…</span>  // decorative, not a control
        ) : (
          <button
            key={entry}
            aria-current={entry === page ? "page" : undefined}
            onClick={() => setPage(entry)}
          >
            {entry}
          </button>
        )
      )}
      <button disabled={page === TOTAL_PAGES} onClick={() => setPage(p => p + 1)}>
        Next
      </button>
    </nav>
  );
}