47 lines
1.8 KiB
Elixir
47 lines
1.8 KiB
Elixir
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
|