feat: adds SearchBar Live Component

lib/mv_web/live/components/search_bar_component.ex

@@ -0,0 +1,62 @@
+defmodule MvWeb.Components.SearchBarComponent do
+  @moduledoc """
+  Provides the SearchBar Live-Component.
+
+  - uses the DaisyUI search input field
+  - sends search_changed event to parent live view with a query
+  """
+  use MvWeb, :live_component
+
+  @impl true
+  def update(assigns, socket) do
+    socket =
+      socket
+      |> assign_new(:query, fn -> "" end)
+      |> assign_new(:placeholder, fn -> gettext("Search...") end)
+
+    {:ok, socket}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <form phx-change="search"
+          phx-target={@myself}class="flex" role="search" aria-label="Search">
+      <label class="input">
+        <svg
+          class="h-[1em] opacity-50"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <g
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            stroke-width="2.5"
+            fill="none"
+            stroke="currentColor"
+          >
+            <circle cx="11" cy="11" r="8"></circle>
+            <path d="m21 21-4.3-4.3"></path>
+          </g>
+        </svg>
+        <input
+          type="search"
+          placeholder={@placeholder}
+          value={@query}
+          name="query"
+          phx-debounce="300"
+        />
+      </label>
+    </form>
+    """
+  end
+
+  @impl true
+  # Function to handle the search
+  def handle_event("search", %{"query" => q}, socket) do
+    # Forward a high level message to the parent
+    send(self(), {:search_changed, q})
+    {:noreply, assign(socket, :query, q)}
+  end
+end