Pagination Component

Basic Pagination

Current page: 1

Pagination with Edge Pages

Current page: 5

Pagination without Edge Pages

Current page: 1

Usage Examples

Basic Pagination

"use client";

import { useState } from "react";
import { Pagination } from "@/components/pagination";

export default function BasicPagination() {
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <Pagination
      currentPage={currentPage}
      totalPages={10}
      onPageChange={setCurrentPage}
    />
  );
}

Pagination with Edge Pages

<Pagination
  currentPage={currentPage}
  totalPages={20}
  onPageChange={setCurrentPage}
  showEdges
/>

Pagination with Custom Sibling Count

<Pagination
  currentPage={currentPage}
  totalPages={50}
  onPageChange={setCurrentPage}
  siblingCount={2}  // Show 2 pages on each side of current page
  showEdges
/>