[ENHANCEMENT] [NG23-190] [NG23-189] [NG23-207] user disables enables …

…course discussions at project level

[ENHANCEMENT] [NG23-190] [NG23-189] [NG23-207] user disables enables course discussions at project level

lib/oli_web/components/common.ex

@@ -1063,4 +1063,30 @@ defmodule OliWeb.Components.Common do
     </div>
     """
   end
+
+  attr :on_toggle, :string, required: true
+  attr :label, :string, default: nil
+  attr :name, :string, default: nil
+  attr :checked, :boolean, default: false
+  attr :phx_target, :any, default: nil
+  attr :rest, :global, include: ~w(class disabled role)
+
+  def toggle_switch(assigns) do
+    ~H"""
+    <div {@rest}>
+      <form phx-change={@on_toggle} phx-target={@phx_target}>
+        <label class="inline-flex items-center cursor-pointer">
+          <input type="checkbox" name={@name} class="sr-only peer" checked={@checked} />
+          <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[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-primary">
+          </div>
+          <%= case @label do %>
+            <% nil -> %>
+            <% label -> %>
+              <span class="ms-3 text-sm"><%= label %></span>
+          <% end %>
+        </label>
+      </form>
+    </div>
+    """
+  end
 end