75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { useRouter, useSearchParams, usePathname } from "next/navigation";
|
|
|
|
interface PaginationProps {
|
|
currentPage: number;
|
|
totalPages: number;
|
|
total: number;
|
|
}
|
|
|
|
export function Pagination({
|
|
currentPage,
|
|
totalPages,
|
|
total,
|
|
}: PaginationProps) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
|
|
const createPageURL = (pageNumber: number) => {
|
|
const params = new URLSearchParams(searchParams);
|
|
params.set("page", pageNumber.toString());
|
|
return `${pathname}?${params.toString()}`;
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-sm text-muted-foreground">
|
|
Showing page {currentPage} of {totalPages} ({total} total items)
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => router.push(createPageURL(currentPage - 1))}
|
|
disabled={currentPage <= 1}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
Previous
|
|
</Button>
|
|
|
|
{/* Simple pagination logic: show max 5 pages */}
|
|
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
|
|
// Logic to center current page could be added here for large page counts
|
|
// For now, just showing first 5 or all if < 5
|
|
const pageNum = i + 1;
|
|
return (
|
|
<Button
|
|
key={pageNum}
|
|
variant={pageNum === currentPage ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => router.push(createPageURL(pageNum))}
|
|
>
|
|
{pageNum}
|
|
</Button>
|
|
);
|
|
})}
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => router.push(createPageURL(currentPage + 1))}
|
|
disabled={currentPage >= totalPages}
|
|
>
|
|
Next
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|