From 086f943f38588669bb6339fb2f423c4f0564145b Mon Sep 17 00:00:00 2001
From: De Wet Blomerus <dewet.blomerus@salesloft.com>
Date: Fri, 6 Oct 2023 15:50:42 -0400
Subject: [PATCH] =?UTF-8?q?Turn=20checkbox=20into=20toggle=20=F0=9F=8E=9A?=
 =?UTF-8?q?=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/core_components.ex             | 26 ++++++++++++++++++-
 .../live/average_live.html.heex               |  6 ++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/lib/quick_average_web/components/core_components.ex b/lib/quick_average_web/components/core_components.ex
index 2fe0543..f527cb5 100644
--- a/lib/quick_average_web/components/core_components.ex
+++ b/lib/quick_average_web/components/core_components.ex
@@ -294,7 +294,7 @@ defmodule QuickAverageWeb.CoreComponents do
     default: "text",
     values:
       ~w(checkbox color date datetime-local email file hidden month number password
-               range radio search select tel text textarea time url week)
+               range radio search select tel text textarea time url week toggle)
 
   attr :value, :any
 
@@ -358,6 +358,30 @@ defmodule QuickAverageWeb.CoreComponents do
     """
   end
 
+  def input(%{type: "toggle"} = assigns) do
+    assigns =
+      assign_new(assigns, :checked, fn ->
+        input_equals?(assigns.value, "true")
+      end)
+
+    ~H"""
+    <label class="relative inline-flex items-center gap-2 cursor-pointer">
+      <input
+        type="checkbox"
+        id={@id || @name}
+        name={@name}
+        value="true"
+        checked={@checked}
+        class="sr-only peer"
+        {@rest}
+      />
+      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
+      </div>
+      <%= @label %>
+    </label>
+    """
+  end
+
   def input(%{type: "select"} = assigns) do
     ~H"""
     <div phx-feedback-for={@name}>
diff --git a/lib/quick_average_web/live/average_live.html.heex b/lib/quick_average_web/live/average_live.html.heex
index 880f6b2..f44de02 100644
--- a/lib/quick_average_web/live/average_live.html.heex
+++ b/lib/quick_average_web/live/average_live.html.heex
@@ -10,7 +10,11 @@
     >
       <.input field={{f, :name}} type="text" label="Name" maxlength={30} />
 
-      <.input field={{f, :only_viewing}} type="checkbox" label="Only Viewing" />
+      <.input
+        field={{f, :only_viewing}}
+        type="toggle"
+        label="Only Viewing 📺"
+      />
 
       <%= if !@only_viewing do %>
         <.input