radio component

lib/labelmaker_web/live/components/radio_component.ex

@@ -0,0 +1,46 @@
+defmodule LabelmakerWeb.RadioComponent do
+  use Phoenix.Component
+
+  # props: class, is_dm, settings, options
+  attr :class, :string, default: ""
+  attr :selected, :string, required: true
+  attr :options, :list, required: true
+
+  # class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
+
+  def radio_component(assigns) do
+    ~H"""
+    <fieldset class={["flex flex-col w-full", @class]}>
+      <div class="inline-flex overflow-hidden rounded w-full">
+        <%= for {option, index} <- Enum.with_index(@options) do %>
+          <label class={[
+            "flex justify-center cursor-pointer w-full px-3 py-2
+               text-sm font-medium capitalize border border-gray-300
+               transition hover:text-primary-dark dark:hover:text-primary-light",
+            if(@selected == option,
+              do:
+                "bg-selected border-gray-600 dark:bg-selected-dark dark:text-fg-dark dark:border-gray-300 font-bold",
+              else:
+                "bg-secondary-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 hover:bg-primary-dark hover:bg-primary-light"
+            ),
+            if(index == 0, do: "rounded-l", else: ""),
+            if(index == length(@options) - 1, do: "rounded-r", else: ""),
+            if(index != 0, do: "border-l border-gray-300", else: "")
+          ]}>
+            <input
+              type="radio"
+              name="cardStyle"
+              value={option}
+              checked={@selected == option}
+              phx-change="set_card_style"
+              phx-value-style={option}
+              class="sr-only"
+            />
+            {option}
+          </label>
+        <% end %>
+      </div>
+    </fieldset>
+    """
+  end
+end

lib/labelmaker_web/live/home.ex

@@ -1,5 +1,6 @@
 defmodule LabelmakerWeb.Home do
   use LabelmakerWeb, :live_view
+  import LabelmakerWeb.RadioComponent
   alias LabelmakerWeb.Constants
   alias LabelmakerWeb.Tools
 

lib/labelmaker_web/live/home.html.heex

@@ -148,6 +148,8 @@
         />
       </div>
     </div>
+
+    <.radio_component options={Constants.permitted_alignments()} selected={@align} />
   </form>
 
   <div class="text-center">