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,6 +11,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
     assigns = assign(assigns, :current_page_number, get_current_page(assigns.page))
 
     ~H"""
+    <%= 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">
@@ -28,14 +29,22 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
           <%= for number <- get_page_numbers(@page) do %>
             <%= if number == @current_page_number do %>
               <li>
-              <a href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
+                <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>
+                  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>
+                <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 %>
@@ -53,6 +62,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
           </li>
         </ul>
       </nav>
+      <% end %>
     """
   end