refactoring folders

lib/elixir_ai_web/utils/form_components.ex

@@ -0,0 +1,56 @@
+defmodule ElixirAiWeb.FormComponents do
+  use Phoenix.Component
+
+  @doc """
+  Renders a styled input field with label.
+
+  ## Examples
+
+      <.input type="text" name="email" value={@email} label="Email" />
+      <.input type="password" name="password" label="Password" />
+  """
+  attr :type, :string, default: "text"
+  attr :name, :string, required: true
+  attr :value, :string, default: ""
+  attr :label, :string, required: true
+  attr :autocomplete, :string, default: "off"
+  attr :rest, :global
+
+  def input(assigns) do
+    ~H"""
+    <div>
+      <label for={@name} class="block text-sm text-seafoam-300 mb-1">{@label}</label>
+      <input
+        type={@type}
+        name={@name}
+        id={@name}
+        value={@value}
+        autocomplete={@autocomplete}
+        class="w-full rounded px-3 py-2 text-sm bg-seafoam-950/20 border border-seafoam-900/40 text-seafoam-100 focus:outline-none focus:ring-1 focus:ring-seafoam-700"
+        {@rest}
+      />
+    </div>
+    """
+  end
+
+  @doc """
+  Renders a centered overlay modal. Pass content via the `:inner_block` slot.
+
+  ## Examples
+
+      <.modal>
+        <p>Are you sure?</p>
+      </.modal>
+  """
+  slot :inner_block, required: true
+
+  def modal(assigns) do
+    ~H"""
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div class="w-full max-w-sm rounded-lg border border-seafoam-900/40 bg-seafoam-950 p-6 shadow-xl">
+        {render_slot(@inner_block)}
+      </div>
+    </div>
+    """
+  end
+end