waveterm/frontend/app/element/toggle.tsx
Red J Adaya 9233b3dbd7
modals component and model and TOS modal (#164)
Co-authored-by: Sylvia Crowe <software@oneirocosm.com>
Co-authored-by: sawka <mike.sawka@gmail.com>
2024-07-30 11:44:19 -07:00

38 lines
975 B
TypeScript

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import "./toggle.less";
interface ToggleProps {
checked: boolean;
onChange: (value: boolean) => void;
label?: string;
id?: string;
}
const Toggle = ({ checked, onChange, label, id }: ToggleProps) => {
const handleChange = (e: any) => {
if (onChange != null) {
onChange(e.target.checked);
}
};
const inputId = id || `toggle-${Math.random().toString(36).substr(2, 9)}`;
return (
<div className="check-toggle-wrapper">
<div className="checkbox-toggle">
<input id={inputId} type="checkbox" checked={checked} onChange={handleChange} />
<span className="slider" />
</div>
{label && (
<label htmlFor={inputId} className="toggle-label">
{label}
</label>
)}
</div>
);
};
export { Toggle };