Merge pull request #36 from reednel/develop

pagination
reednel · Aug 30, 2023 · 376c3d9 · 376c3d9
2 parents 75f5ec3 + 12bded5
commit 376c3d9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 90 deletions.
diff --git a/src/layouts/DrinkSingle.astro b/src/layouts/DrinkSingle.astro
@@ -58,39 +58,43 @@ tags.sort((a: string, b: string) => a.localeCompare(b));
                 <ul>
                   {
                     spirits.length > 0 && (
-                      <li class="mr-4">
-                        {
-                          spirits.map((spirit: string, index: number) => (
-                            <a
-                              class="m-1 inline-block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
-                              href={`/drink/spirits/${spirit}`}
-                            >
-                              {spirit}
-                            </a>
-                          ))
-                        }
-                      </li>
-                      <hr class="my-2">
+                      <div>
+                        <li class="mr-4">
+                          {
+                            spirits.map((spirit: string, index: number) => (
+                              <a
+                                class="m-1 inline-block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
+                                href={`/drink/spirits/${spirit}`}
+                              >
+                                {spirit}
+                              </a>
+                            ))
+                          }
+                        </li>
+                        {bottles.length > 0 || tags.length > 0 ? <hr class="my-2" /> : null}
+                      </div>
                     )
                   }
                 </ul>
                 <!-- Bottles -->
                 <ul>
                   {
                     bottles.length > 0 && (
-                      <li class="mr-4">
-                        {
-                          bottles.map((bottle: string, index: number) => (
-                            <a
-                              class="m-1 inline-block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
-                              href={`/drink/bottles/${bottle}`}
-                            >
-                              {bottle}
-                            </a>
-                          ))
-                        }
-                      </li>
-                      <hr class="my-2">
+                      <div>
+                        <li class="mr-4">
+                          {
+                            bottles.map((bottle: string, index: number) => (
+                              <a
+                                class="m-1 inline-block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
+                                href={`/drink/bottles/${bottle}`}
+                              >
+                                {bottle}
+                              </a>
+                            ))
+                          }
+                        </li>
+                        {tags.length > 0 ? <hr class="my-2" /> : null}
+                      </div>
                     )
                   }
                 </ul>

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>
   )