100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationItem,
|
|
PaginationLink,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from "@/components/ui/pagination";
|
|
|
|
type Props = {
|
|
currentPage: number;
|
|
totalPages: number;
|
|
onChange: (page: number) => void;
|
|
};
|
|
|
|
export default function PaginationLite({
|
|
currentPage,
|
|
totalPages,
|
|
onChange,
|
|
}: Props) {
|
|
const getPages = () => {
|
|
const visibleCount = 7; // maximum number of items to show (including ellipses)
|
|
const pages: (number | string)[] = [];
|
|
|
|
// If total pages are within visible limit, show all
|
|
if (totalPages <= visibleCount) {
|
|
for (let i = 1; i <= totalPages; i++) pages.push(i);
|
|
return pages;
|
|
}
|
|
|
|
// If current page is near the beginning: show 1..5, ellipsis, last
|
|
if (currentPage <= 4) {
|
|
for (let i = 1; i <= 5; i++) pages.push(i);
|
|
pages.push("…", totalPages);
|
|
return pages;
|
|
}
|
|
|
|
// If current page is near the end: show first, ellipsis, last-4..last
|
|
if (currentPage >= totalPages - 3) {
|
|
pages.push(1, "…");
|
|
for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
|
|
return pages;
|
|
}
|
|
|
|
// Middle case: first, ellipsis, current-1, current, current+1, ellipsis, last
|
|
pages.push(
|
|
1,
|
|
"…",
|
|
currentPage - 1,
|
|
currentPage,
|
|
currentPage + 1,
|
|
"…",
|
|
totalPages,
|
|
);
|
|
return pages;
|
|
};
|
|
|
|
const pages = getPages();
|
|
|
|
return (
|
|
<Pagination className="w-full flex justify-center items-center mx-auto">
|
|
<PaginationContent className="w-full px-auto items-center flex justify-center ">
|
|
{totalPages !== 1 && (
|
|
<PaginationPrevious
|
|
className="hover:cursor-pointer text-white hover:text-white"
|
|
onClick={() => onChange(Math.max(1, currentPage - 1))}
|
|
/>
|
|
)}
|
|
|
|
{/* Pages */}
|
|
{pages.map((p, idx) =>
|
|
p === "…" ? (
|
|
<PaginationItem key={idx} className="px-2 text-white">
|
|
…
|
|
</PaginationItem>
|
|
) : (
|
|
<PaginationItem key={idx}>
|
|
<PaginationLink
|
|
isActive={p === currentPage}
|
|
className={`hover:cursor-pointer ${p === currentPage ? "text-black scale-110 text-[20px] font-medium" : "text-white"} hover:text-white border`}
|
|
onClick={() => onChange(Number(p))}
|
|
>
|
|
{p}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
),
|
|
)}
|
|
{totalPages !== 1 && (
|
|
<PaginationNext
|
|
className="hover:cursor-pointer text-white hover:text-white"
|
|
onClick={() => onChange(Math.min(totalPages, currentPage + 1))}
|
|
/>
|
|
)}
|
|
</PaginationContent>
|
|
</Pagination>
|
|
);
|
|
}
|