radio component

assets/tailwind.config.js

@@ -26,6 +26,10 @@ module.exports = {
 					light: '#64D9ED',
 					dark: '#324B77',
 				},
+				selected: {
+					light: '#6CBDEE',
+					dark: '#5376B3',
+				},
 			},
 		},
 	},

lib/labelmaker_web/constants.ex

@@ -24,6 +24,12 @@ defmodule LabelmakerWeb.Constants do
                   |> Enum.map(&Atom.to_string/1)
 
   @alignments [
+    "left",
+    "center",
+    "right"
+  ]
+
+  @gravity [
     "west",
     "center",
     "east"
@@ -92,6 +98,7 @@ defmodule LabelmakerWeb.Constants do
   def max_label_error, do: @max_label_error
   def outlines, do: ["none" | @colors]
   def permitted_alignments, do: @alignments
+  def permitted_gravity, do: @gravity
   def permitted_keys, do: @permitted_keys
   def preview, do: @preview
   def sizes, do: @sizes

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">

lib/labelmaker_web/tools.ex

@@ -51,7 +51,7 @@ defmodule LabelmakerWeb.Tools do
           pair
       end)
       |> Enum.filter(fn
-        {:align, align} -> align in Constants.permitted_alignments()
+        {:align, align} -> align in Constants.permitted_gravity()
         {:color, color} -> color in Constants.colors()
         {:font, font} -> font in Map.values(Constants.font_map())
         {:outline, outline} -> outline in Constants.outlines()