import { HTMLAttributes } from 'react';
import { cn } from '../lib/cn';
export interface PaginationProps extends HTMLAttributes {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
siblingCount?: number;
}
type Item = number | 'ellipsis-l' | 'ellipsis-r';
function buildPages(current: number, total: number, sibling: number): Item[] {
if (total <= 7) {
return Array.from({ length: total }, (_, i) => i + 1);
}
const items: Item[] = [];
const leftBoundary = Math.max(2, current - sibling);
const rightBoundary = Math.min(total - 1, current + sibling);
items.push(1);
if (leftBoundary > 2) items.push('ellipsis-l');
for (let p = leftBoundary; p <= rightBoundary; p++) items.push(p);
if (rightBoundary < total - 1) items.push('ellipsis-r');
items.push(total);
return items;
}
const btnBase =
'inline-flex items-center justify-center min-w-9 h-9 px-3 rounded-lg text-sm border transition-colors';
export function Pagination({
currentPage,
totalPages,
onPageChange,
siblingCount = 1,
className,
...rest
}: PaginationProps) {
if (totalPages <= 0) return null;
const pages = buildPages(currentPage, totalPages, siblingCount);
const prevDisabled = currentPage <= 1;
const nextDisabled = currentPage >= totalPages;
return (
);
}