90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
|
import * as hi from "jsr:@preact-icons/hi2";
|
||
|
|
|
||
|
|
export function PaginationControl({
|
||
|
|
paginatedData,
|
||
|
|
currentUrl,
|
||
|
|
authorId,
|
||
|
|
}: {
|
||
|
|
paginatedData: PaginatedPosts;
|
||
|
|
currentUrl: URL;
|
||
|
|
authorId: number;
|
||
|
|
}) {
|
||
|
|
const buildUrl = (page: number, limit?: number) => {
|
||
|
|
const params = new URLSearchParams(currentUrl.searchParams);
|
||
|
|
params.set("page", page.toString());
|
||
|
|
if (limit) params.set("limit", limit.toString());
|
||
|
|
return `${currentUrl.pathname}?${params.toString()}`;
|
||
|
|
};
|
||
|
|
|
||
|
|
if (paginatedData.totalPages <= 1) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div class="mt-8 space-y-4">
|
||
|
|
{/* Pagination info and controls */}
|
||
|
|
<div class="flex flex-col sm:flex-row justify-center items-center gap-4">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
{paginatedData.hasPrevPage && (
|
||
|
|
<a
|
||
|
|
href={buildUrl(paginatedData.currentPage - 1)}
|
||
|
|
class="px-4 py-2 bg-[#45475a] text-[#cdd6f4] shadow-sm rounded hover:bg-[#6A6B7A] transition-colors"
|
||
|
|
>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<hi.HiChevronDoubleLeft />
|
||
|
|
Previous
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Page numbers */}
|
||
|
|
<div class="flex gap-1">
|
||
|
|
{Array.from(
|
||
|
|
{ length: Math.min(paginatedData.totalPages, 7) },
|
||
|
|
(_, i) => {
|
||
|
|
let pageNum;
|
||
|
|
if (paginatedData.totalPages <= 7) {
|
||
|
|
pageNum = i + 1;
|
||
|
|
} else {
|
||
|
|
const start = Math.max(1, paginatedData.currentPage - 3);
|
||
|
|
const end = Math.min(paginatedData.totalPages, start + 6);
|
||
|
|
pageNum = start + i;
|
||
|
|
if (pageNum > end) return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const isCurrentPage = pageNum === paginatedData.currentPage;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<a
|
||
|
|
key={pageNum}
|
||
|
|
href={buildUrl(pageNum)}
|
||
|
|
class={`px-3 py-1 rounded text-sm shadow-sm ${
|
||
|
|
isCurrentPage
|
||
|
|
? "bg-[#6A6B7A] text-[#cdd6f4]"
|
||
|
|
: "bg-[#45475a] text-[#cdd6f4] hover:bg-[#6A6B7A]"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{pageNum}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{paginatedData.hasNextPage && (
|
||
|
|
<a
|
||
|
|
href={buildUrl(paginatedData.currentPage + 1)}
|
||
|
|
class="px-4 py-2 bg-[#45475a] text-[#cdd6f4] shadow-sm rounded hover:bg-[#6A6B7A] transition-colors"
|
||
|
|
>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
Next
|
||
|
|
<hi.HiChevronDoubleRight />
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Quick jump to page */}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|