text alignment for widthxheight images

lib/labelmaker_web/live/components/radio_component.ex

@@ -1,39 +1,40 @@
 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"
+  attr :event_name, :string, required: true
 
   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
+          <label
+            for={"radio-#{option}"}
+            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: "")
-          ]}>
+              if(@selected == option,
+                do:
+                  "bg-selected-light 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}
+              name="radio_option"
+              id={"radio-#{option}"}
               checked={@selected == option}
-              phx-change="set_card_style"
-              phx-value-style={option}
+              phx-click={@event_name}
+              phx-value-option={option}
               class="sr-only"
             />
             {option}

lib/labelmaker_web/live/home.ex

@@ -19,18 +19,6 @@ defmodule LabelmakerWeb.Home do
     }
   end
 
-  def handle_event("update_preview", %{"bg" => bg}, socket) do
-    preview_background =
-      case bg do
-        "r" -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
-        "b" -> "bg-[linear-gradient(to_bottom,_black_33%,_white_67%)]"
-        "c" -> ""
-        _ -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
-      end
-
-    {:noreply, assign(socket, :preview_background, preview_background)}
-  end
-
   def handle_event("update_label", params, socket) do
     assigns =
       socket.assigns
@@ -43,6 +31,22 @@ defmodule LabelmakerWeb.Home do
     {:noreply, assign(socket, assigns)}
   end
 
+  def handle_event("update_preview", %{"bg" => bg}, socket) do
+    preview_background =
+      case bg do
+        "r" -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
+        "b" -> "bg-[linear-gradient(to_bottom,_black_33%,_white_67%)]"
+        "c" -> ""
+        _ -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
+      end
+
+    {:noreply, assign(socket, :preview_background, preview_background)}
+  end
+
+  def handle_event("update_alignment", %{"option" => option}, socket) do
+    {:noreply, assign(socket, :align, option)}
+  end
+
   def handle_event("make_label", params, socket) do
     {:noreply, redirect(socket, to: ~p"/#{params["label"]}?#{Map.drop(params, ["label"])}")}
   end

lib/labelmaker_web/live/home.html.heex

@@ -149,12 +149,16 @@
       </div>
     </div>
 
-    <.radio_component options={Constants.permitted_alignments()} selected={@align} />
+    <.radio_component
+      options={Constants.permitted_alignments()}
+      selected={@align}
+      event_name="update_alignment"
+    />
   </form>
 
   <div class="text-center">
     <a href={@link}>
-      <button class="inline-block bg-primary text-fg-light dark:text-fg-dark px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
+      <button class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
         Create
       </button>
     </a>