refactor: replace pagination logic with Astro built-in pagination (#376)

src/components/Pagination.astro

@@ -1,49 +1,43 @@
 ---
+import type { Page } from "astro";
 import LinkButton from "./LinkButton.astro";
+import type { CollectionEntry } from "astro:content";
 
 export interface Props {
-  currentPage: number;
-  totalPages: number;
-  prevUrl: string;
-  nextUrl: string;
+  page: Page<CollectionEntry<"blog">>;
 }
 
-const { currentPage, totalPages, prevUrl, nextUrl } = Astro.props;
-
-const prev = currentPage > 1 ? "" : "disabled";
-const next = currentPage < totalPages ? "" : "disabled";
-const isPrevDisabled = prev === "disabled";
-const isNextDisabled = next === "disabled";
+const { page } = Astro.props;
 ---
 
 {
-  totalPages > 1 && (
+  page.lastPage > 1 && (
     <nav class="pagination-wrapper" aria-label="Pagination">
       <LinkButton
-        disabled={isPrevDisabled}
-        href={prevUrl}
-        className={`mr-4 select-none ${prev}`}
+        disabled={!page.url.prev}
+        href={page.url.prev as string}
+        className={`mr-4 select-none ${page.url.prev ? "" : "disabled"}`}
         ariaLabel="Previous"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class:list={[{ "disabled-svg": isPrevDisabled }]}
+          class:list={[{ "disabled-svg": !page.url.prev }]}
         >
           <path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z" />
         </svg>
         Prev
       </LinkButton>
-      {currentPage} / {totalPages}
+      {page.currentPage} / {page.lastPage}
       <LinkButton
-        disabled={isNextDisabled}
-        href={nextUrl}
-        className={`ml-4 select-none ${next}`}
+        disabled={!page.url.next}
+        href={page.url.next as string}
+        className={`mx-4 select-none ${page.url.next ? "" : "disabled"}`}
         ariaLabel="Next"
       >
         Next
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class:list={[{ "disabled-svg": isNextDisabled }]}
+          class:list={[{ "disabled-svg": !page.url.next }]}
         >
           <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
         </svg>