56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import React from "react";
|
|
|
|
interface InputToggleProps {
|
|
label: string; // Represents the toggle state (on/off)
|
|
onClick?: () => void; // Function to handle toggle clicks
|
|
value?: boolean;
|
|
inputKey: string;
|
|
}
|
|
|
|
// Update InputToggle.tsx to be fully controlled
|
|
const InputToggle: React.FC<InputToggleProps> = ({
|
|
label,
|
|
onClick,
|
|
value = false,
|
|
inputKey,
|
|
}) => {
|
|
// Remove internal state and use the value prop directly
|
|
function handleOnClick() {
|
|
if (onClick) onClick();
|
|
}
|
|
|
|
return (
|
|
<div className="input-toggle-container">
|
|
<label htmlFor={`toogle-input-${inputKey}`} className="label">
|
|
{label}
|
|
</label>
|
|
<button
|
|
id="check-box"
|
|
className={"check-box"}
|
|
onClick={handleOnClick}
|
|
style={{
|
|
background: value ? "var(--background-color-accent)" : "",
|
|
outline: value ? "" : "1px solid var(--border-color)",
|
|
}}
|
|
>
|
|
<div
|
|
className="check-box-style"
|
|
style={{
|
|
left: value ? "16px" : "2px",
|
|
background: value ? "" : "var(--text-disabled)",
|
|
}}
|
|
></div>
|
|
<input
|
|
type="checkbox"
|
|
name=""
|
|
id={`toogle-input-${inputKey}`}
|
|
checked={value}
|
|
readOnly
|
|
/>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InputToggle;
|