cannery/lib/cannery_web/components/core_components/toggle_button.html.heex

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