Pagination

import { useState } from "react";
import {
  Pagination,
  PaginationList,
  PaginationNext,
  PaginationPrevious,
} from "@gpuixui/components/pagination";

const PAGE_SIZE = 5;

export const DeploymentPages = ({ deployments }: { deployments: string[] }) => {
  const [page, setPage] = useState(1);
  const pageCount = Math.ceil(deployments.length / PAGE_SIZE);
  const rows = deployments.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);

  return (
    <>
      <DeploymentList rows={rows} />
      <Pagination page={page} pageCount={pageCount} onPageChange={setPage}>
        <PaginationPrevious />
        <PaginationList />
        <PaginationNext />
      </Pagination>
    </>
  );
};

Pagination
├── PaginationPrevious
├── PaginationList
│   ├── PaginationItem
│   └── PaginationEllipsis
└── PaginationNext