91 lines
2.0 KiB
TypeScript
91 lines
2.0 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>
|
|
);
|
|
}
|