48 lines
1.7 KiB
Elixir
48 lines
1.7 KiB
Elixir
defmodule LabelmakerWeb.RadioComponent do
|
|
use Phoenix.Component
|
|
|
|
attr :class, :string, default: ""
|
|
attr :selected, :string, required: true
|
|
attr :options, :list, required: true
|
|
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
|
|
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-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="radio_option"
|
|
id={"radio-#{option}"}
|
|
checked={@selected == option}
|
|
phx-click={@event_name}
|
|
phx-value-option={option}
|
|
class="sr-only"
|
|
/>
|
|
{option}
|
|
</label>
|
|
<% end %>
|
|
</div>
|
|
</fieldset>
|
|
"""
|
|
end
|
|
end
|