Pagination

import { useState } from 'react';
import { Pagination } from '@components-kit/react';

const fetchNext = () => {};
const fetchPrevious = () => {};
const fetchFirst = () => {};
const fetchLast = () => {};

// Basic offset mode (uncontrolled)
<Pagination totalPages={10} defaultPage={1} />

// Controlled offset mode
function ControlledPagination() {
  const [page, setPage] = useState(1);

  return <Pagination totalPages={10} page={page} onPageChange={setPage} />;
}

// With custom siblings
<Pagination totalPages={20} defaultPage={10} siblings={2} />

// With first/last buttons
<Pagination totalPages={50} defaultPage={1} showFirstLast />

// Cursor-based mode
<Pagination
  hasNextPage={data.hasNext}
  hasPreviousPage={data.hasPrevious}
  onNext={() => fetchNext()}
  onPrevious={() => fetchPrevious()}
/>

// Cursor mode with first/last buttons
<Pagination
  hasNextPage={true}
  hasPreviousPage={true}
  onNext={() => fetchNext()}
  onPrevious={() => fetchPrevious()}
  showFirstLast
  onFirst={() => fetchFirst()}
  onLast={() => fetchLast()}
/>

// Disabled
<Pagination totalPages={10} defaultPage={3} disabled />

// With variant
<Pagination totalPages={10} defaultPage={1} variantName="compact" />