pagination

import { useState } from "react";

export function usePagination(initialPage = 1) {
  const [page, setPage] = useState(initialPage);

  const nextPage = () => {
    setPage((prev) => prev + 1);
  };

  const prevPage = () => {
    setPage((prev) => Math.max(prev - 1, 1));
  };

  return {
    page,
    setPage,
    nextPage,
    prevPage,
  };
}


/* 

const pagination = usePagination();

const { data } = useUsers({
  page: pagination.page,
});


<Pagination
  page={pagination.page}
  totalPages={data.meta.totalPages}
  onNext={pagination.nextPage}
  onPrev={pagination.prevPage}
/>

*/

types

export interface PaginationProps {
  page: number;
  totalPages: number;

  onNext: () => void;
  onPrev: () => void;
}

pagination.tsx

import { ChevronLeft, ChevronRight } from "lucide-react";
import type { PaginationProps } from "./types";

export function Pagination({
  page,
  totalPages,
  onNext,
  onPrev,
}: PaginationProps) {
  const isFirstPage = page <= 1;
  const isLastPage = page >= totalPages;

  return (
    <div className="flex justify-end items-center gap-3">
      <button
        type="button"
        onClick={onPrev}
        disabled={isFirstPage}
        className="flex justify-center items-center disabled:opacity-50 border rounded-md w-9 h-9 disabled:cursor-not-allowed"
      >
        <ChevronLeft size={18} />
      </button>

      <p className="text-sm">
        Page {page} of {totalPages}
      </p>

      <button
        type="button"
        onClick={onNext}
        disabled={isLastPage}
        className="flex justify-center items-center disabled:opacity-50 border rounded-md w-9 h-9 disabled:cursor-not-allowed"
      >
        <ChevronRight size={18} />
      </button>
    </div>
  );
}