Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 118x 11x 11x 1x 49x 49x 49x 1x 1x | import { ChevronLeft, ChevronRight } from 'lucide-react';
interface PaginationProps {
page: number;
totalPages: number;
onPageChange: (page: number) => void;
windowSize?: number;
}
function Pagination({ page, totalPages, onPageChange, windowSize = 5 }: PaginationProps) {
if (totalPages <= 1) return null;
const startPage = Math.max(1, Math.min(page - Math.floor(windowSize / 2), totalPages - windowSize + 1));
return (
<div className="flex items-center justify-center gap-2 px-6 py-4 border-t border-border bg-surface-secondary">
<button
disabled={page <= 1}
onClick={() => onPageChange(page - 1)}
className="p-2 rounded-lg text-text-tertiary hover:text-accent hover:bg-accent-bg disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
>
<ChevronLeft className="w-4 h-4" />
</button>
{Array.from({ length: Math.min(windowSize, totalPages) }, (_, i) => {
const p = startPage + i;
Iif (p > totalPages) return null;
return (
<button
key={`page-${p}`}
onClick={() => onPageChange(p)}
className={`min-w-[32px] h-8 px-2 text-[13px] font-medium rounded-lg transition-all ${
p === page
? 'bg-accent text-white shadow-sm'
: 'text-text-tertiary hover:text-text-primary hover:bg-surface-secondary'
}`}
>
{p}
</button>
);
})}
<button
disabled={page >= totalPages}
onClick={() => onPageChange(page + 1)}
className="p-2 rounded-lg text-text-tertiary hover:text-accent hover:bg-accent-bg disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
>
<ChevronRight className="w-4 h-4" />
</button>
</div>
);
}
export { Pagination };
export type { PaginationProps };
|