135 lines
3.9 KiB
Plaintext
135 lines
3.9 KiB
Plaintext
---
|
|
type Pagination = {
|
|
section?: string;
|
|
currentPage?: number;
|
|
totalPages?: number;
|
|
};
|
|
const { section, currentPage = 1, totalPages = 1 }: Pagination = Astro.props;
|
|
|
|
const indexPageLink = currentPage === 2;
|
|
const hasPrevPage = currentPage > 1;
|
|
const hasNextPage = totalPages > currentPage!;
|
|
|
|
let pageList: number[] = [];
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
pageList.push(i);
|
|
}
|
|
---
|
|
|
|
{
|
|
totalPages > 1 && (
|
|
<nav
|
|
class="flex items-center justify-center space-x-3"
|
|
aria-label="Pagination"
|
|
>
|
|
{/* previous */}
|
|
{hasPrevPage ? (
|
|
<a
|
|
href={
|
|
indexPageLink
|
|
? `${section ? "/" + section : "/"}`
|
|
: `${section ? "/" + section : ""}/page/${currentPage - 1}`
|
|
}
|
|
class="rounded px-2 py-1.5 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
|
|
>
|
|
<span class="sr-only">Previous</span>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
height="30"
|
|
width="30"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
) : (
|
|
<span class="rounded px-2 py-1.5 text-light">
|
|
<span class="sr-only">Previous</span>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
height="30"
|
|
width="30"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
)}
|
|
|
|
{/* page index */}
|
|
{pageList.map((pagination, i) =>
|
|
pagination === currentPage ? (
|
|
<span
|
|
aria-current="page"
|
|
class="rounded bg-primary px-4 py-2 text-white dark:bg-darkmode-primary dark:text-dark"
|
|
>
|
|
{pagination}
|
|
</span>
|
|
) : (
|
|
<a
|
|
href={
|
|
i === 0
|
|
? `${section ? "/" + section : "/"}`
|
|
: `${section ? "/" + section : ""}/page/${pagination}`
|
|
}
|
|
aria-current="page"
|
|
class="rounded px-4 py-2 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
|
|
>
|
|
{pagination}
|
|
</a>
|
|
)
|
|
)}
|
|
|
|
{/* next page */}
|
|
{hasNextPage ? (
|
|
<a
|
|
href={`${section ? "/" + section : ""}/page/${currentPage + 1}`}
|
|
class="rounded px-2 py-1.5 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
|
|
>
|
|
<span class="sr-only">Next</span>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
height="30"
|
|
width="30"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
) : (
|
|
<span class="rounded px-2 py-1.5 text-light">
|
|
<span class="sr-only">Next</span>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
height="30"
|
|
width="30"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
)}
|
|
</nav>
|
|
)
|
|
}
|