Update the search component to send event for updating the query.

lib/decentralised_book_index_web/components/my_components/author_search.ex

@@ -10,8 +10,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorSearch do
     ~H"""
     <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
-        <div class="w-full md:w-1/2">
-          <form class="flex items-center">
+        <div class="w-full grow">
+          <form class="flex items-center" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">

lib/decentralised_book_index_web/components/my_components/book_search.ex

@@ -12,8 +12,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
     ~H"""
     <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
-        <div class="w-full md:w-1/2">
-          <form class="flex items-center">
+        <div class="w-full grow">
+          <form class="flex items-center" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -61,7 +61,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
             </svg>
         </button>
         <!-- Dropdown menu -->
-        <div id="dropdownSearchBook" class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
+        <div id="dropdownSearchBook" class="z-10 hidden text-base list-none bg-white rounded-lg shadow-sm w-64 dark:bg-gray-700 p-2 flex flex-col gap-2">
           <div class="flex items-center w-full space-x-3 md:w-auto">
             <form phx-change="change-search-mode">
             <select name="search_mode" id="search_mode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">

lib/decentralised_book_index_web/live/author_live/index.ex

@@ -186,4 +186,13 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Index do
 
     {:noreply, push_patch(socket, to: ~p"/authors?#{params}")}
   end
+
+  @impl true
+  def handle_event("search", %{"query" => query}, socket) do
+    params =
+      socket.assigns.params
+      |> Map.put("query", query)
+
+    {:noreply, push_patch(socket, to: ~p"/authors?#{params}")}
+  end
 end

lib/decentralised_book_index_web/live/book_live/index.ex

@@ -250,4 +250,14 @@ defmodule DecentralisedBookIndexWeb.BookLive.Index do
         )
     end
   end
+
+  @impl true
+  def handle_event("search", %{"query" => query}, socket) do
+    params =
+      socket.assigns.params
+      |> Map.put("query", query)
+
+    {:noreply, push_patch(socket, to: ~p"/books?#{params}")}
+  end
+
 end