Extract search component

lib/music_library_web/components/record_components.ex

@@ -188,6 +188,25 @@ defmodule MusicLibraryWeb.RecordComponents do
     """
   end
 
+  attr :query, :string, required: true
+
+  def search_form(assigns) do
+    ~H"""
+    <form class="w-2/3" for={@query} phx-submit="search" phx-change="search">
+      <.input
+        type="search"
+        id={:query}
+        name={:query}
+        value={@query}
+        placeholder={gettext("Search")}
+        phx-debounce="500"
+        autocorrect="off"
+        autocapitalize="none"
+      />
+    </form>
+    """
+  end
+
   defp toggle_actions_menu(record_id) do
     JS.toggle(to: "#actions-#{record_id}")
     |> JS.toggle_class("pointer-events-none", to: "#records > li")

lib/music_library_web/live/collection_live/index.html.heex

@@ -1,18 +1,7 @@
 <div>
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
-      <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
-        <.input
-          type="search"
-          id={:query}
-          name={:query}
-          value={@record_list_params.query}
-          placeholder={gettext("Search")}
-          phx-debounce="500"
-          autocorrect="off"
-          autocapitalize="none"
-        />
-      </form>
+      <.search_form query={@record_list_params.query} />
       <.link patch={~p"/collection/import"}>
         <.button>{gettext("Import")}</.button>
       </.link>

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -1,18 +1,7 @@
 <div>
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
-      <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
-        <.input
-          type="search"
-          id={:query}
-          name={:query}
-          value={@record_list_params.query}
-          placeholder={gettext("Search")}
-          phx-debounce="500"
-          autocorrect="off"
-          autocapitalize="none"
-        />
-      </form>
+      <.search_form query={@record_list_params.query} />
       <.link patch={~p"/wishlist/import"}>
         <.button>{gettext("Import")}</.button>
       </.link>