Added test button to apprise input (#226)

lib/pinchflat_web/components/core_components.ex

@@ -266,6 +266,7 @@ defmodule PinchflatWeb.CoreComponents do
                 multiple pattern placeholder readonly required rows size step)
 
   slot :inner_block
+  slot :input_append
 
   def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
     assigns
@@ -424,20 +425,23 @@ defmodule PinchflatWeb.CoreComponents do
       <.label for={@id}>
         <%= @label %><span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
       </.label>
-      <input
-        type={@type}
-        name={@name}
-        id={@id}
-        value={Phoenix.HTML.Form.normalize_value(@type, @value)}
-        class={[
-          "w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black",
-          "outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter",
-          "dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary",
-          @inputclass,
-          @errors != [] && "border-rose-400 focus:border-rose-400"
-        ]}
-        {@rest}
-      />
+      <div class="flex items-center">
+        <input
+          type={@type}
+          name={@name}
+          id={@id}
+          value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+          class={[
+            "w-full rounded-lg border-[1.5px] px-5 py-3 font-normal border-form-strokedark bg-form-input",
+            "outline-none transition active:border-primary disabled:cursor-default disabled:bg-whiter",
+            "text-white focus:border-primary",
+            @inputclass,
+            @errors != [] && "border-rose-400 focus:border-rose-400"
+          ]}
+          {@rest}
+        />
+        <%= render_slot(@input_append) %>
+      </div>
       <.help :if={@help}><%= if @html_help, do: Phoenix.HTML.raw(@help), else: @help %></.help>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>

lib/pinchflat_web/components/custom_components/button_components.ex

@@ -89,4 +89,46 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
     </div>
     """
   end
+
+  @doc """
+  Render a button with an icon. Optionally include a tooltip.
+
+  ## Examples
+
+      <.icon_button icon_name="hero-check" tooltip="Complete" />
+  """
+  attr :icon_name, :string, required: true
+  attr :class, :string, default: ""
+  attr :tooltip, :string, default: nil
+  attr :rest, :global
+
+  def icon_button(assigns) do
+    ~H"""
+    <div class="group relative inline-block">
+      <button
+        class={[
+          "flex justify-center items-center rounded-lg ",
+          "bg-form-input border-2 border-strokedark",
+          "hover:bg-meta-4 hover:border-form-strokedark",
+          @class
+        ]}
+        type="button"
+        {@rest}
+      >
+        <CoreComponents.icon name={@icon_name} class="text-stroke" />
+      </button>
+      <div
+        :if={@tooltip}
+        class={[
+          "hidden absolute left-1/2 top-full z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded-md",
+          "px-4.5 py-1.5 text-sm font-medium opacity-0 drop-shadow-4 group-hover:opacity-100 group-hover:block bg-meta-4"
+        ]}
+      >
+        <span class="border-light absolute -top-1 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm bg-meta-4">
+        </span>
+        <span><%= @tooltip %></span>
+      </div>
+    </div>
+    """
+  end
 end