85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
|
"use client";
|
||
|
|
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
export default function CustomPagination(props: { totalPage: number; onPageChange: (data: number) => void }) {
|
||
|
|
const { totalPage, onPageChange } = props;
|
||
|
|
const [page, setPage] = useState(1);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
onPageChange(page);
|
||
|
|
}, [page]);
|
||
|
|
|
||
|
|
const renderPageNumbers = () => {
|
||
|
|
const pageNumbers = [];
|
||
|
|
const halfWindow = Math.floor(5 / 2);
|
||
|
|
let startPage = Math.max(2, page - halfWindow);
|
||
|
|
let endPage = Math.min(totalPage - 1, page + halfWindow);
|
||
|
|
|
||
|
|
if (endPage - startPage + 1 < 5) {
|
||
|
|
if (page <= halfWindow) {
|
||
|
|
endPage = Math.min(totalPage, endPage + (5 - (endPage - startPage + 1)));
|
||
|
|
} else if (page + halfWindow >= totalPage) {
|
||
|
|
startPage = Math.max(1, startPage - (5 - (endPage - startPage + 1)));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let i = startPage; i <= endPage; i++) {
|
||
|
|
pageNumbers.push(
|
||
|
|
<PaginationItem key={i} onClick={() => setPage(i)}>
|
||
|
|
<PaginationLink className="cursor-pointer" isActive={page === i}>
|
||
|
|
{i}
|
||
|
|
</PaginationLink>
|
||
|
|
</PaginationItem>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return pageNumbers;
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Pagination>
|
||
|
|
<PaginationContent>
|
||
|
|
<PaginationItem>
|
||
|
|
<PaginationLink className="cursor-pointer" onClick={() => (page > 10 ? setPage(page - 10) : "")}>
|
||
|
|
{/* <DoubleArrowLeftIcon /> */}
|
||
|
|
</PaginationLink>
|
||
|
|
</PaginationItem>
|
||
|
|
<PaginationItem>
|
||
|
|
<PaginationPrevious className="cursor-pointer" onClick={() => (page > 1 ? setPage(page - 1) : "")} />
|
||
|
|
</PaginationItem>
|
||
|
|
<PaginationItem>
|
||
|
|
<PaginationLink className="cursor-pointer" onClick={() => setPage(1)} isActive={page === 1}>
|
||
|
|
{1}
|
||
|
|
</PaginationLink>
|
||
|
|
</PaginationItem>
|
||
|
|
{page > 4 && (
|
||
|
|
<PaginationItem>
|
||
|
|
<PaginationEllipsis className="cursor-pointer" onClick={() => setPage(page - 1)} />
|
||
|
|
</PaginationItem>
|
||
|
|
)}
|
||
|
|
{renderPageNumbers()}
|
||
|
|
{page < totalPage - 3 && (
|
||
|
|
<PaginationItem>
|
||
|
|
<PaginationEllipsis className="cursor-pointer" onClick={() => setPage(page + 1)} />
|
||
|
|
</PaginationItem>
|
||
|
|
)}
|
||
|
|
{totalPage > 1 && (
|
||
|
|
<PaginationItem>
|
||
|
|
<PaginationLink className="cursor-pointer" onClick={() => setPage(totalPage)} isActive={page === totalPage}>
|
||
|
|
{totalPage}
|
||
|
|
</PaginationLink>
|
||
|
|
</PaginationItem>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<PaginationItem>
|
||
|
|
<PaginationNext className="cursor-pointer" onClick={() => (page < totalPage ? setPage(page + 1) : "")} />
|
||
|
|
</PaginationItem>
|
||
|
|
<PaginationItem>
|
||
|
|
<PaginationLink onClick={() => (page < totalPage - 10 ? setPage(page + 10) : "")}>{/* <DoubleArrowRightIcon /> */}</PaginationLink>
|
||
|
|
</PaginationItem>
|
||
|
|
</PaginationContent>
|
||
|
|
</Pagination>
|
||
|
|
);
|
||
|
|
}
|