54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
 
|
import Link from "next/link";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||
|
|
|
||
|
|
interface PageNavProps {
|
||
|
|
basePath: string;
|
||
|
|
page: number;
|
||
|
|
pageSize: number;
|
||
|
|
total: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PageNav({ basePath, page, pageSize, total }: PageNavProps) {
|
||
|
|
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||
|
|
if (totalPages <= 1) return null;
|
||
|
|
|
||
|
|
const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
|
||
|
|
const to = Math.min(page * pageSize, total);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-between gap-4 pt-2">
|
||
|
|
<span className="bp-readout text-xs text-muted-foreground">
|
||
|
|
{from}-{to} of {total}
|
||
|
|
</span>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
{page > 1 ? (
|
||
|
|
<Button asChild variant="outline" size="icon-sm">
|
||
|
|
<Link href={`${basePath}?page=${page - 1}`} aria-label="Previous page">
|
||
|
|
<ChevronLeft className="size-3.5" />
|
||
|
|
</Link>
|
||
|
|
</Button>
|
||
|
|
) : (
|
||
|
|
<Button variant="outline" size="icon-sm" disabled aria-label="Previous page">
|
||
|
|
<ChevronLeft className="size-3.5" />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
<span className="bp-readout text-xs text-muted-foreground">
|
||
|
|
{page} / {totalPages}
|
||
|
|
</span>
|
||
|
|
{page < totalPages ? (
|
||
|
|
<Button asChild variant="outline" size="icon-sm">
|
||
|
|
<Link href={`${basePath}?page=${page + 1}`} aria-label="Next page">
|
||
|
|
<ChevronRight className="size-3.5" />
|
||
|
|
</Link>
|
||
|
|
</Button>
|
||
|
|
) : (
|
||
|
|
<Button variant="outline" size="icon-sm" disabled aria-label="Next page">
|
||
|
|
<ChevronRight className="size-3.5" />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|