michal/harmonizer_plugin
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

closes #12

Browse Source
This commit is contained in:
michalcourson
2025-12-05 16:05:27 -05:00
parent 31e5b1370a
commit 005b924917
2 changed files with 30 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
Assets/web/src/Components/JuceCheckbox.js
View File

@ -6,7 +6,7 @@ import * as Juce from "juce-framework-frontend";
// import FormGroup from "@mui/material/FormGroup"; // import FormGroup from "@mui/material/FormGroup";
// import FormControlLabel from "@mui/material/FormControlLabel"; // import FormControlLabel from "@mui/material/FormControlLabel";
import { controlParameterIndexAnnotation } from "../types/JuceTypes.js"; import { controlParameterIndexAnnotation } from "../types/JuceTypes.js";
import { ToggleSwitch } from "./ToggleSwitch.js"; // import { ToggleSwitch } from "./ToggleSwitch.js";
export default function JuceCheckbox({ identifier }) { export default function JuceCheckbox({ identifier }) {
JuceCheckbox.propTypes = { JuceCheckbox.propTypes = {
@ -54,7 +54,35 @@ export default function JuceCheckbox({ identifier }) {
checkboxState.properties.parameterIndex, 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> {/* <FormGroup>
<FormControlLabel control={cb} /> <FormControlLabel control={cb} />
</FormGroup> */} </FormGroup> */}

42
Assets/web/src/Components/ToggleSwitch.js
View File

@ -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>
);
}