63 lines
2.5 KiB
TypeScript
Executable File
63 lines
2.5 KiB
TypeScript
Executable File
// components/ui/pagination.tsx
|
|
"use client";
|
|
|
|
import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
|
|
import { Button } from "./button";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
|
|
|
|
interface PaginationProps {
|
|
totalPages: number;
|
|
currentPage: number;
|
|
onPageChange: (page: number) => void;
|
|
perPage: number;
|
|
onPerPageChange: (perPage: number) => void;
|
|
}
|
|
|
|
export function Pagination({ totalPages, currentPage, onPageChange, perPage, onPerPageChange }: PaginationProps) {
|
|
return (
|
|
<div className="flex items-center justify-between space-x-4">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-sm text-gray-700">Rows per page</span>
|
|
<Select
|
|
value={perPage.toString()}
|
|
onValueChange={(value) => {
|
|
onPerPageChange(Number(value));
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-8 w-fit">
|
|
<SelectValue placeholder={perPage} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="1">1</SelectItem>
|
|
<SelectItem value="5">5</SelectItem>
|
|
<SelectItem value="10">10</SelectItem>
|
|
<SelectItem value="20">20</SelectItem>
|
|
<SelectItem value="50">50</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<div className="text-sm text-gray-700">
|
|
Page {currentPage} of {totalPages}
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-1">
|
|
<Button variant="outline" size="icon" onClick={() => onPageChange(1)} disabled={currentPage === 1} className="h-8 w-8">
|
|
<ChevronsLeftIcon className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="icon" onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1} className="h-8 w-8">
|
|
<ChevronLeftIcon className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="icon" onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages} className="h-8 w-8">
|
|
<ChevronRightIcon className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="icon" onClick={() => onPageChange(totalPages)} disabled={currentPage === totalPages} className="h-8 w-8">
|
|
<ChevronsRightIcon className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|