b5425e705e
All checks were successful
Build and Push Docker Image / build (push) Successful in 10m33s
87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
|
|
|
interface PaginationProps {
|
|
page: number
|
|
totalPages: number
|
|
total: number
|
|
perPage: number
|
|
onPageChange: (page: number) => void
|
|
onPerPageChange?: (perPage: number) => void
|
|
}
|
|
|
|
export function Pagination({
|
|
page,
|
|
totalPages,
|
|
total,
|
|
perPage,
|
|
onPageChange,
|
|
onPerPageChange,
|
|
}: PaginationProps) {
|
|
if (totalPages <= 1 && !onPerPageChange) return null
|
|
|
|
const from = (page - 1) * perPage + 1
|
|
const to = Math.min(page * perPage, total)
|
|
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<p className="text-sm text-muted-foreground">
|
|
Showing {from} to {to} of {total} results
|
|
</p>
|
|
{onPerPageChange && (
|
|
<Select
|
|
value={String(perPage)}
|
|
onValueChange={(v) => onPerPageChange(Number(v))}
|
|
>
|
|
<SelectTrigger className="h-8 w-[70px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{[10, 20, 50, 100].map((n) => (
|
|
<SelectItem key={n} value={String(n)}>
|
|
{n}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</div>
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onPageChange(page - 1)}
|
|
disabled={page === 1}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
Previous
|
|
</Button>
|
|
<span className="text-sm">
|
|
Page {page} of {totalPages}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onPageChange(page + 1)}
|
|
disabled={page >= totalPages}
|
|
>
|
|
Next
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|