Pagination

import { Pagination } from "@/ui/Pagination";

<Pagination.Root
  page={page}
  totalPages={24}
  onPageChange={setPage}
  siblingCount={1}
/>

function PaginationRoot({ page, totalPages, onPageChange }: { page: number; totalPages: number; onPageChange: (page: number) => void }) {
  const pages = Array.from({ length: totalPages }, (_, index) => index + 1);
  return (
    <nav className="inline-flex items-center gap-1">
      <button type="button" onClick={() => onPageChange(page - 1)} disabled={page <= 1}>Prev</button>
      {pages.map((token) => (
        <button key={token} type="button" onClick={() => onPageChange(token)} className={token === page ? "bg-primary text-white" : ""}>{token}</button>
      ))}
      <button type="button" onClick={() => onPageChange(page + 1)} disabled={page >= totalPages}>Next</button>
    </nav>
  );
}

type PaginationCompound = typeof PaginationRoot & { Root: typeof PaginationRoot };
export const Pagination = Object.assign(PaginationRoot, { Root: PaginationRoot }) as PaginationCompound;