Pagination

import { useState } from "react";


export default function Demo() {
  const pageSizeOptions = [4, 6, 12, 24, 48, 2000];
  const data = [...Array(64).keys()];


  const [page, setPage] = useState(0);
  const [pageSize, setPageSize] = useState(pageSizeOptions[2]);


  const numPages = Math.ceil(data.length / pageSize);


  return (
    <div className="w-full">
      <div className="flex flex-wrap gap-sm rounded">
        {data.slice(pageSize * page, pageSize * (page + 1)).map((i) => (
          <HvPanel
            className="w-[100px] text-center"
            key={i}
          >{`Item ${i + 1}`}</HvPanel>
        ))}
      </div>
      <HvPagination
        pages={numPages}
        page={page}
        canPrevious={page > 0}
        canNext={page < numPages - 1}
        pageSize={pageSize}
        pageSizeOptions={pageSizeOptions}
        onPageChange={setPage}
        onPageSizeChange={setPageSize}
        labels={{ pageSizeEntryName: "items" }}
      />
    </div>
  );
}