File size: 1,390 Bytes
2b62b0c 4c7b844 | 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 57 58 | import { Button } from "@pram/ui/components/button";
interface PaginationProps {
page: number;
totalPages: number;
onChange: (p: number) => void;
}
export function Pagination({ page, totalPages, onChange }: PaginationProps) {
if (totalPages <= 1) return null;
const pages: (number | "...")[] = [];
for (let i = 1; i <= totalPages; i++) {
if (i === 1 || i === totalPages || (i >= page - 2 && i <= page + 2)) {
pages.push(i);
} else if (pages[pages.length - 1] !== "...") {
pages.push("...");
}
}
return (
<div className="flex items-center justify-center gap-1 mt-6">
<Button
variant="outline"
size="sm"
onClick={() => onChange(page - 1)}
disabled={page <= 1}
>
Previous
</Button>
{pages.map((p, i) =>
p === "..." ? (
<span key={`e-${i}`} className="px-2 text-[var(--warm-charcoal)]">
...
</span>
) : (
<Button
key={p}
variant={p === page ? "default" : "outline"}
size="sm"
onClick={() => onChange(p as number)}
>
{p}
</Button>
),
)}
<Button
variant="outline"
size="sm"
onClick={() => onChange(page + 1)}
disabled={page >= totalPages}
>
Next
</Button>
</div>
);
}
|