"use client"; import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/registry/primitives/core/pagination"; import { cn } from "@/lib/registry/cn"; export interface PaginationControlsProps { currentPage: number; totalPages: number; onPageChange?: (page: number) => void; onPrevious: () => void; onNext: () => void; summaryClassName?: string; controlsClassName?: string; previousLabel?: string; nextLabel?: string; styleVariant?: "default" | "compact"; /** * Horizontal alignment of the pagination row. Logical values per * [[feedback_logical_props_not_physical]]: `start` / `end` map to * RTL-correct `justify-start` / `justify-end`. */ alignment?: "start" | "end" | "center"; showPageNumbers?: boolean; showSummary?: boolean; /** * Maximum number of numeric page links shown between previous/next controls. * Minimum effective value is 2. */ visiblePageLinkCount?: number; } type PageToken = number | "ellipsis-left" | "ellipsis-right"; /** Compute the ordered list of numeric page links (and ellipsis * markers) to render between the previous/next controls. */ function computeVisiblePageTokens( currentPage: number, totalPages: number, maxVisibleLinks: number, ): PageToken[] { if (totalPages <= maxVisibleLinks) { return Array.from({ length: totalPages }, (_unused, index) => index + 1); } const half = Math.floor(maxVisibleLinks / 2); let start = currentPage - half; let end = start + maxVisibleLinks - 1; if (start < 1) { start = 1; end = maxVisibleLinks; } if (end > totalPages) { end = totalPages; start = Math.max(1, end - maxVisibleLinks + 1); } const visibleSet = new Set( Array.from({ length: totalPages }, (_unused, index) => index + 1).filter( (page) => page >= start && page <= end, ), ); visibleSet.add(1); visibleSet.add(totalPages); const sortedPages = Array.from(visibleSet).sort((a, b) => a - b); const visibleTokens: PageToken[] = []; for (const page of sortedPages) { const previous = visibleTokens[visibleTokens.length - 1]; if (typeof previous === "number" && page - previous > 1) { visibleTokens.push( previous < currentPage ? "ellipsis-left" : "ellipsis-right", ); } visibleTokens.push(page); } return visibleTokens; } export function PaginationControls({ currentPage, totalPages, onPageChange, onPrevious, onNext, summaryClassName, controlsClassName, previousLabel = "Previous", nextLabel = "Next", styleVariant = "default", alignment = "end", showPageNumbers, showSummary = false, visiblePageLinkCount = 5, }: PaginationControlsProps) { if (totalPages <= 1) return null; const isCompact = styleVariant === "compact"; const atStart = currentPage <= 1; const atEnd = currentPage >= totalPages; const shouldShowPageNumbers = showPageNumbers ?? true; const maxVisibleLinks = Math.max(2, Math.floor(visiblePageLinkCount)); const alignmentClassName = alignment === "start" ? "justify-start" : alignment === "center" ? "justify-center" : "justify-end"; return (

{showSummary ? (

Page {currentPage} of {totalPages}

) : null}

{ if (atStart) return; onPrevious(); }} /> {shouldShowPageNumbers ? computeVisiblePageTokens( currentPage, totalPages, maxVisibleLinks, ).map((token) => { if (typeof token !== "number") { return ( ); } const isActivePage = token === currentPage; return ( { if (isActivePage) return; onPageChange?.(token); }} > {token} ); }) : null} { if (atEnd) return; onNext(); }} />

); }

Pagination Controls

Showcase

Pagination Controls