Pagination

import { Pagination } from "@araf-ds/core"

export default function Example() {
  const [page, setPage] = useState(1)
  return (
    <Pagination
      page={page}
      totalPages={10}
      onPageChange={setPage}
    />
  )
}

<Pagination totalPages={5} defaultPage={1} onPageChange={(p) => console.log(p)} />

<Pagination
  page={7}
  totalPages={50}
  siblingCount={1}
  onPageChange={setPage}
/>
{/* renders: « 1 ... 6 [7] 8 ... 50 » */}

function UsersTable({ users }: { users: User[] }) {
  const [page, setPage] = useState(1);
  const pageSize = 10;
  const totalPages = Math.ceil(users.length / pageSize);
  const visibleUsers = users.slice((page - 1) * pageSize, page * pageSize);

  return (
    <div>
      <Table>
        {/* rows from visibleUsers */}
      </Table>
      <div className="flex justify-end mt-4">
        <Pagination
          page={page}
          totalPages={totalPages}
          onPageChange={setPage}
        />
      </div>
    </div>
  );
}