31 lines
1.1 KiB
Plaintext
31 lines
1.1 KiB
Plaintext
<label for={@id || @action} class="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
id={@id || @action}
|
|
type="checkbox"
|
|
value={@value}
|
|
checked={@value}
|
|
class="sr-only peer"
|
|
aria-labelledby={"#{@id || @action}-label"}
|
|
{
|
|
if assigns |> Map.has_key?(:target),
|
|
do: %{"phx-click": @action, "phx-value-value": @value, "phx-target": @target},
|
|
else: %{"phx-click": @action, "phx-value-value": @value}
|
|
}
|
|
/>
|
|
<div class="w-11 h-6 bg-gray-300 rounded-full peer
|
|
peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800
|
|
peer-checked:bg-gray-600
|
|
peer-checked:after:translate-x-full peer-checked:after:border-white
|
|
after:content-[''] after:absolute after:top-1 after:left-[2px] after:bg-white after:border-gray-300
|
|
after:border after:rounded-full after:h-5 after:w-5
|
|
after:transition-all after:duration-250 after:ease-in-out
|
|
transition-colors duration-250 ease-in-out">
|
|
</div>
|
|
<span
|
|
id={"#{@id || @action}-label"}
|
|
class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300 whitespace-nowrap"
|
|
>
|
|
<%= render_slot(@inner_block) %>
|
|
</span>
|
|
</label>
|