"use client"; import { useState } from "react"; import type { HTMLAttributes, ReactNode } from "react"; export type PaginationToken = number | "ellipsis-start" | "ellipsis-end"; export function getPaginationRange(page: number, pageCount: number, siblingCount = 1, boundaryCount = 1): PaginationToken[] { const count = Math.max(0, Math.floor(pageCount)); if (count === 0) return []; const current = Math.min(Math.max(1, page), count); const range = (start: number, end: number) => end < start ? [] : Array.from({ length: end - start + 1 }, (_, index) => start + index); const startPages = range(1, Math.min(boundaryCount, count)); const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count); const siblingsStart = Math.max( Math.min(current - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2, ); const siblingsEnd = Math.min( Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : count - 1, ); const tokens: PaginationToken[] = [...startPages]; if (siblingsStart > boundaryCount + 2) tokens.push("ellipsis-start"); else if (boundaryCount + 1 < count - boundaryCount) tokens.push(boundaryCount + 1); tokens.push(...range(siblingsStart, siblingsEnd)); if (siblingsEnd < count - boundaryCount - 1) tokens.push("ellipsis-end"); else if (count - boundaryCount > boundaryCount) tokens.push(count - boundaryCount); tokens.push(...endPages); return tokens.filter((token, index) => tokens.indexOf(token) === index && (typeof token !== "number" || (token >= 1 && token <= count))); } export type PaginationProps = Omit, "onChange"> & { pageCount: number; page?: number; defaultPage?: number; onPageChange?: (page: number) => void; siblingCount?: number; boundaryCount?: number; getHref?: (page: number) => string; compact?: boolean; label?: string; previousLabel?: string; nextLabel?: string; }; const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#121A22]"; const cell = "inline-flex h-10 min-w-10 items-center justify-center gap-1.5 rounded-md px-2.5 text-sm tabular-nums transition-colors motion-reduce:transition-none "; const idle = "text-[#16202A] hover:bg-[#F1F4F7] dark:text-[#E4EAF0] dark:hover:bg-[#18222C] "; const disabledClass = "pointer-events-none text-[#56616E]/50 dark:text-[#95A2AF]/50 "; export function Pagination({ pageCount, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, getHref, compact = false, label = "Pagination", previousLabel = "Previous", nextLabel = "Next", className = "", ...props }: PaginationProps) { const [uncontrolled, setUncontrolled] = useState(defaultPage); const current = Math.min(Math.max(1, page ?? uncontrolled), Math.max(1, pageCount)); const tokens = getPaginationRange(current, pageCount, siblingCount, boundaryCount); const go = (next: number) => { if (next < 1 || next > pageCount || next === current) return; if (page === undefined) setUncontrolled(next); onPageChange?.(next); }; const control = (target: number, content: ReactNode, extra: { label?: string; current?: boolean; disabled?: boolean; className?: string }) => { const classes = cell + (extra.current ? "bg-[#16202A] font-medium text-white dark:bg-[#E4EAF0] dark:text-[#0C1218] " : extra.disabled ? disabledClass : idle) + ring + " " + (extra.className ?? ""); if (getHref) { return ( { if (!extra.disabled) go(target); }} className={classes} > {content} ); } return ( ); }; const arrow = (direction: "left" | "right") => ( ); return (

{control(current - 1, <>{arrow("left")}{previousLabel}, { label: previousLabel + " page", disabled: current <= 1, className: "pr-3", })}
{control(token, token, { label: "Page " + token, current: token === current })}
…
Page {current} of {pageCount}
{control(current + 1, <>{nextLabel}{arrow("right")}, { label: nextLabel + " page", disabled: current >= pageCount, className: "pl-3", })}

); }