scale pagination

reednel · Aug 26, 2023 · 12bded5 · 12bded5
1 parent 684b59a
commit 12bded5
Showing 1 changed file with 9 additions and 64 deletions.
diff --git a/src/layouts/components/Pagination.astro b/src/layouts/components/Pagination.astro
@@ -9,11 +9,6 @@ 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);
-}
 ---
 
 {
@@ -23,7 +18,7 @@ for (let i = 1; i <= totalPages; i++) {
       aria-label="Pagination"
     >
       {/* previous */}
-      {hasPrevPage ? (
+      {hasPrevPage && (
         <a
           href={
             indexPageLink
@@ -47,51 +42,18 @@ for (let i = 1; i <= totalPages; i++) {
             />
           </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>
-        )
-      )}
+      {/* current page */}
+      <span
+        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"
+      >
+        {currentPage}
+      </span>
 
       {/* next page */}
-      {hasNextPage ? (
+      {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"
@@ -111,23 +73,6 @@ for (let i = 1; i <= totalPages; i++) {
             />
           </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>
   )