From 005b924917cfe00e8c8d415c1f078b1f8cbc5cd1 Mon Sep 17 00:00:00 2001
From: michalcourson <mcourson@cusackmusic.com>
Date: Fri, 5 Dec 2025 16:05:27 -0500
Subject: [PATCH] closes #12

---
 Assets/web/src/Components/JuceCheckbox.js | 32 +++++++++++++++--
 Assets/web/src/Components/ToggleSwitch.js | 42 -----------------------
 2 files changed, 30 insertions(+), 44 deletions(-)
 delete mode 100644 Assets/web/src/Components/ToggleSwitch.js

diff --git a/Assets/web/src/Components/JuceCheckbox.js b/Assets/web/src/Components/JuceCheckbox.js
index b4acc9c..71dce12 100644
--- a/Assets/web/src/Components/JuceCheckbox.js
+++ b/Assets/web/src/Components/JuceCheckbox.js
@@ -6,7 +6,7 @@ import * as Juce from "juce-framework-frontend";
 // import FormGroup from "@mui/material/FormGroup";
 // import FormControlLabel from "@mui/material/FormControlLabel";
 import { controlParameterIndexAnnotation } from "../types/JuceTypes.js";
-import { ToggleSwitch } from "./ToggleSwitch.js";
+// import { ToggleSwitch } from "./ToggleSwitch.js";
 
 export default function JuceCheckbox({ identifier }) {
   JuceCheckbox.propTypes = {
@@ -54,7 +54,35 @@ export default function JuceCheckbox({ identifier }) {
           checkboxState.properties.parameterIndex,
       }}
     >
-      <ToggleSwitch value={value} onChange={handleChange} />
+      <div className="flex gap-2">
+        <button
+          onClick={() => handleChange(true)}
+          className={`px-8 py-3 rounded transition-colors transition-shadow relative overflow-hidden ${
+            value
+              ? `bg-primary text-[#1a1a1a] shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]`
+              : `bg-[#1a1a1a] text-primary border-2 border-[#2a2a2a] shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]`
+          }`}
+        >
+          {!value && (
+            <div className="absolute -top-1/4 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none blur-[2px]" />
+          )}
+          <span className="relative z-10">ON</span>
+        </button>
+        <button
+          onClick={() => handleChange(false)}
+          className={`px-8 py-3 rounded transition-colors transition-shadow relative overflow-hidden ${
+            !value
+              ? `bg-primary text-[#1a1a1a] shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]`
+              : `bg-[#1a1a1a] text-primary border-2 border-[#2a2a2a] shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]`
+          }`}
+        >
+          {value && (
+            <div className="absolute -top-1/4 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none blur-[2px]" />
+          )}
+          <span className="relative z-10">OFF</span>
+        </button>
+      </div>
+      {/* <ToggleSwitch value={value} onChange={handleChange} /> */}
       {/* <FormGroup>
         <FormControlLabel control={cb} />
       </FormGroup> */}
diff --git a/Assets/web/src/Components/ToggleSwitch.js b/Assets/web/src/Components/ToggleSwitch.js
deleted file mode 100644
index 9808bab..0000000
--- a/Assets/web/src/Components/ToggleSwitch.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useState } from "react";
-
-export function ToggleSwitch({ value = true, onChange }) {
-  const [isOn, setIsOn] = useState(value);
-
-  const handleToggle = (newValue) => {
-    setIsOn(newValue);
-    onChange?.(newValue);
-  };
-
-  return (
-    <div className="flex gap-2">
-      <button
-        onClick={() => handleToggle(true)}
-        className={`px-8 py-3 rounded transition-colors transition-shadow relative overflow-hidden ${
-          isOn
-            ? `bg-primary text-[#1a1a1a] shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]`
-            : `bg-[#1a1a1a] text-primary border-2 border-[#2a2a2a] shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]`
-        }`}
-      >
-        {!isOn && (
-          <div className="absolute -top-1/4 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none blur-[2px]" />
-        )}
-        <span className="relative z-10">ON</span>
-      </button>
-      <button
-        onClick={() => handleToggle(false)}
-        className={`px-8 py-3 rounded transition-colors transition-shadow relative overflow-hidden ${
-          !isOn
-            ? `bg-primary text-[#1a1a1a] shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]`
-            : `bg-[#1a1a1a] text-primary border-2 border-[#2a2a2a] shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]`
-        }`}
-      >
-        {isOn && (
-          <div className="absolute -top-1/4 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none blur-[2px]" />
-        )}
-        <span className="relative z-10">OFF</span>
-      </button>
-    </div>
-  );
-}