73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
|
interface PaginationProps {
|
|
page: number;
|
|
totalPages: number;
|
|
total: number;
|
|
}
|
|
|
|
export function Pagination({ page, totalPages, total }: PaginationProps) {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
|
|
if (totalPages <= 1) return null;
|
|
|
|
const goToPage = (p: number) => {
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
params.set("page", String(p));
|
|
router.push(`?${params.toString()}`);
|
|
};
|
|
|
|
// Show at most 5 page numbers
|
|
const getPageNumbers = () => {
|
|
const pages: number[] = [];
|
|
const start = Math.max(1, page - 2);
|
|
const end = Math.min(totalPages, start + 4);
|
|
for (let i = start; i <= end; i++) pages.push(i);
|
|
return pages;
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center justify-between gap-2 pt-4 border-t">
|
|
<p className="text-sm text-muted-foreground">
|
|
Page {page} of {totalPages} ({total} posts)
|
|
</p>
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page <= 1}
|
|
onClick={() => goToPage(page - 1)}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
|
|
{getPageNumbers().map((p) => (
|
|
<Button
|
|
key={p}
|
|
variant={p === page ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => goToPage(p)}
|
|
className="w-9"
|
|
>
|
|
{p}
|
|
</Button>
|
|
))}
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page >= totalPages}
|
|
onClick={() => goToPage(page + 1)}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|