usePagination

import { usePagination } from '@kuzenbo/hooks';

function Demo() {
  const pagination = usePagination({ total: 10 });

  return (
    <div>
      <div>
        {pagination.range.map((page, index) => (
          <button
            key={index}
            onClick={() => typeof page === 'number' && pagination.setPage(page)}
            disabled={page === 'dots' || page === pagination.active}
          >
            {page === 'dots' ? '...' : page}
          </button>
        ))}
      </div>
      <p>Active page: {pagination.active}</p>
    </div>
  );
}

import { usePagination } from '@kuzenbo/hooks';

function Demo() {
  const { range, active, setPage, next, previous, first, last } = usePagination({
    total: 20,
    siblings: 1,
    boundaries: 1,
  });

  return (
    <div>
      <button onClick={first}>First</button>
      <button onClick={previous}>Previous</button>
      
      {range.map((page, index) => (
        <button
          key={index}
          onClick={() => typeof page === 'number' && setPage(page)}
          disabled={page === 'dots' || page === active}
        >
          {page === 'dots' ? '...' : page}
        </button>
      ))}
      
      <button onClick={next}>Next</button>
      <button onClick={last}>Last</button>
    </div>
  );
}

import { usePagination } from '@kuzenbo/hooks';
import { useState } from 'react';

function Demo() {
  const [page, setPage] = useState(1);
  const pagination = usePagination({
    total: 15,
    page,
    onChange: setPage,
  });

  return (
    <div>
      <p>Current page: {page}</p>
      {pagination.range.map((item, index) => (
        <button
          key={index}
          onClick={() => typeof item === 'number' && setPage(item)}
          disabled={item === 'dots' || item === page}
        >
          {item === 'dots' ? '...' : item}
        </button>
      ))}
    </div>
  );
}

import { usePagination } from '@kuzenbo/hooks';

function Demo() {
  const pagination = usePagination({
    total: 10,
    startValue: 0, // Pages: 0, 1, 2, ..., 9
  });

  return (
    <div>
      {pagination.range.map((page, index) => (
        <button
          key={index}
          onClick={() => typeof page === 'number' && pagination.setPage(page)}
        >
          {page === 'dots' ? '...' : page}
        </button>
      ))}
    </div>
  );
}

interface UsePaginationOptions {
  initialPage?: number;
  page?: number;
  total: number;
  siblings?: number;
  boundaries?: number;
  onChange?: (page: number) => void;
  startValue?: number;
}

interface UsePaginationReturnValue {
  range: (number | 'dots')[];
  active: number;
  setPage: (page: number) => void;
  next: () => void;
  previous: () => void;
  first: () => void;
  last: () => void;
}

function usePagination(
  options: UsePaginationOptions
): UsePaginationReturnValue