78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
|
|
|
interface MangaPaginationProps {
|
|
currentPage: number
|
|
totalPages: number
|
|
onPageChange: (page: number) => void
|
|
}
|
|
|
|
export function MangaPagination({ currentPage, totalPages, onPageChange }: MangaPaginationProps) {
|
|
const getPageNumbers = () => {
|
|
const pages: (number | string)[] = []
|
|
const showEllipsis = totalPages > 7
|
|
|
|
if (!showEllipsis) {
|
|
return Array.from({ length: totalPages }, (_, i) => i + 1)
|
|
}
|
|
|
|
// Always show first page
|
|
pages.push(1)
|
|
|
|
if (currentPage > 3) {
|
|
pages.push("...")
|
|
}
|
|
|
|
// Show pages around current page
|
|
for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
|
|
pages.push(i)
|
|
}
|
|
|
|
if (currentPage < totalPages - 2) {
|
|
pages.push("...")
|
|
}
|
|
|
|
// Always show last page
|
|
if (totalPages > 1) {
|
|
pages.push(totalPages)
|
|
}
|
|
|
|
return pages
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center gap-2">
|
|
<Button variant="outline" size="icon" onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1}>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
|
|
{getPageNumbers().map((page, index) => (
|
|
<div key={index}>
|
|
{page === "..." ? (
|
|
<span className="px-2 text-muted-foreground">...</span>
|
|
) : (
|
|
<Button
|
|
variant={currentPage === page ? "default" : "outline"}
|
|
size="icon"
|
|
onClick={() => onPageChange(page as number)}
|
|
>
|
|
{page}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|