"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange?: (page: number) => void;
  siblingCount?: number;
  showFirstLast?: boolean;
  className?: string;
}

function generatePageNumbers(
  currentPage: number,
  totalPages: number,
  siblingCount: number
): (number | "ellipsis")[] {
  const pages: (number | "ellipsis")[] = [];
  const siblings = Math.max(siblingCount, 1);
  const leftSibling = Math.max(currentPage - siblings, 2);
  const rightSibling = Math.min(currentPage + siblings, totalPages - 1);

  if (totalPages <= 1) {
    return [1];
  }

  pages.push(1);

  if (leftSibling > 2) {
    pages.push("ellipsis");
  } else if (totalPages > 2) {
    for (let i = 2; i < leftSibling; i++) {
      pages.push(i);
    }
  }

  for (let i = leftSibling; i <= rightSibling; i++) {
    if (i > 1 && i < totalPages) {
      pages.push(i);
    }
  }

  if (rightSibling < totalPages - 1) {
    pages.push("ellipsis");
  } else if (totalPages > 2) {
    for (let i = rightSibling + 1; i < totalPages; i++) {
      pages.push(i);
    }
  }

  if (totalPages > 1) {
    pages.push(totalPages);
  }

  return pages;
}

function Pagination({
  currentPage,
  totalPages,
  onPageChange,
  siblingCount = 1,
  showFirstLast = true,
  className,
}: PaginationProps) {
  const pages = generatePageNumbers(currentPage, totalPages, siblingCount);
  const canGoPrev = currentPage > 1;
  const canGoNext = currentPage < totalPages;

  const handleClick = (page: number) => {
    if (page !== currentPage && page >= 1 && page <= totalPages) {
      onPageChange?.(page);
    }
  };

  const buttonBase = cn(
    "flex h-9 min-w-9 items-center justify-center rounded-lg border border-border bg-card px-3 text-sm font-medium text-foreground transition-colors",
    "hover:text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
    "disabled:pointer-events-none disabled:opacity-40"
  );

  const activeButton = cn("text-primary font-semibold");

  return (
    <nav
      aria-label="Pagination"
      className={cn("flex items-center gap-1", className)}
    >
      {showFirstLast ? (
        <button
          type="button"
          onClick={() => handleClick(1)}
          disabled={!canGoPrev}
          aria-label="First page"
          className={buttonBase}
        >
          <span aria-hidden="true">&laquo;</span>
        </button>
      ) : null}

      <button
        type="button"
        onClick={() => handleClick(currentPage - 1)}
        disabled={!canGoPrev}
        aria-label="Previous page"
        className={buttonBase}
      >
        <span aria-hidden="true">&lsaquo;</span>
      </button>

      {pages.map((page, index) => {
        if (page === "ellipsis") {
          return (
            <span
              key={`ellipsis-${index}`}
              className="flex h-9 min-w-9 items-center justify-center text-sm text-muted-foreground"
              aria-hidden="true"
            >
              ...
            </span>
          );
        }

        const isActive = page === currentPage;
        return (
          <button
            key={page}
            type="button"
            onClick={() => handleClick(page)}
            aria-label={`Page ${page}`}
            aria-current={isActive ? "page" : undefined}
            className={cn(buttonBase, isActive && activeButton)}
          >
            {page}
          </button>
        );
      })}

      <button
        type="button"
        onClick={() => handleClick(currentPage + 1)}
        disabled={!canGoNext}
        aria-label="Next page"
        className={buttonBase}
      >
        <span aria-hidden="true">&rsaquo;</span>
      </button>

      {showFirstLast ? (
        <button
          type="button"
          onClick={() => handleClick(totalPages)}
          disabled={!canGoNext}
          aria-label="Last page"
          className={buttonBase}
        >
          <span aria-hidden="true">&raquo;</span>
        </button>
      ) : null}
    </nav>
  );
}

export { Pagination };
export type { PaginationProps };
Pagination

Dependencies

Files

Installation
