Update the pagination component to show itself if there's more than one page.

lib/decentralised_book_index_web/components/my_components/pagination.ex

@@ -11,48 +11,58 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
     assigns = assign(assigns, :current_page_number, get_current_page(assigns.page))
 
     ~H"""
-    <nav aria-label="Page navigation example" class="flex justify-center">
-      <ul class="inline-flex -space-x-px text-base h-10 mx-auto">
-        <li class="pl-auto">
-          <.button_link
-            data-role="previous-page"
-            kind="primary"
-            inverse
-            patch={"#{@endpoint}?#{page_params_which(@page, @params, "prev")}"}
-            class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-            disabled={!AshPhoenix.LiveView.prev_page?(@page)}
-          >
-            Previous
-          </.button_link>
-        </li>
-        <%= for number <- get_page_numbers(@page) do %>
-          <%= if number == @current_page_number do %>
-            <li>
-              <a href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
-                 aria-current="page"
-                 class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{number}</a>
-            </li>
-          <% else %>
-            <li>
-              <a href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
-                 class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{number}</a>
-            </li>
+    <%= if AshPhoenix.LiveView.prev_page?(@page) or AshPhoenix.LiveView.next_page?(@page) do %>
+      <nav aria-label="Page navigation example" class="flex justify-center">
+        <ul class="inline-flex -space-x-px text-base h-10 mx-auto">
+          <li class="pl-auto">
+            <.button_link
+              data-role="previous-page"
+              kind="primary"
+              inverse
+              patch={"#{@endpoint}?#{page_params_which(@page, @params, "prev")}"}
+              class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+              disabled={!AshPhoenix.LiveView.prev_page?(@page)}
+            >
+              Previous
+            </.button_link>
+          </li>
+          <%= for number <- get_page_numbers(@page) do %>
+            <%= if number == @current_page_number do %>
+              <li>
+                <a
+                  href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
+                  aria-current="page"
+                  class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+                >
+                  {number}
+                </a>
+              </li>
+            <% else %>
+              <li>
+                <a
+                  href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
+                  class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                >
+                  {number}
+                </a>
+              </li>
+            <% end %>
           <% end %>
-        <% end %>
-        <li>
-          <.button_link
-            data-role="next-page"
-            kind="primary"
-            inverse
-            patch={"#{@endpoint}?#{page_params_which(@page, @params, "next")}"}
-            class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-            disabled={!AshPhoenix.LiveView.next_page?(@page)}
-          >
-            Next
-          </.button_link>
-        </li>
-      </ul>
-    </nav>
+          <li>
+            <.button_link
+              data-role="next-page"
+              kind="primary"
+              inverse
+              patch={"#{@endpoint}?#{page_params_which(@page, @params, "next")}"}
+              class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+              disabled={!AshPhoenix.LiveView.next_page?(@page)}
+            >
+              Next
+            </.button_link>
+          </li>
+        </ul>
+      </nav>
+      <% end %>
     """
   end