57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { Button } from '@/components/ui/button'
|
||
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||
|
|
|
||
|
|
interface PaginationProps {
|
||
|
|
page: number
|
||
|
|
totalPages: number
|
||
|
|
total: number
|
||
|
|
perPage: number
|
||
|
|
onPageChange: (page: number) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Pagination({
|
||
|
|
page,
|
||
|
|
totalPages,
|
||
|
|
total,
|
||
|
|
perPage,
|
||
|
|
onPageChange,
|
||
|
|
}: PaginationProps) {
|
||
|
|
if (totalPages <= 1) return null
|
||
|
|
|
||
|
|
const from = (page - 1) * perPage + 1
|
||
|
|
const to = Math.min(page * perPage, total)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
Showing {from} to {to} of {total} results
|
||
|
|
</p>
|
||
|
|
<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>
|
||
|
|
)
|
||
|
|
}
|