52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
|
import React, { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
interface InputToggleProps {
|
||
|
|
label: string; // Represents the toggle state (on/off)
|
||
|
|
onClick?: () => void; // Function to handle toggle clicks
|
||
|
|
value?: boolean;
|
||
|
|
inputKey: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const InputToggle: React.FC<InputToggleProps> = ({
|
||
|
|
label,
|
||
|
|
onClick,
|
||
|
|
value = false,
|
||
|
|
inputKey,
|
||
|
|
}) => {
|
||
|
|
const [activeValue, setActiveValue] = useState<boolean>(value);
|
||
|
|
|
||
|
|
function handleOnClick() {
|
||
|
|
setActiveValue(!activeValue);
|
||
|
|
if (onClick) onClick();
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setActiveValue(value);
|
||
|
|
}, [value]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="input-toggle-container">
|
||
|
|
<label htmlFor={`toogle-input-${inputKey}`} className="label">
|
||
|
|
{label}
|
||
|
|
</label>
|
||
|
|
<div className={"check-box"} onClick={handleOnClick}>
|
||
|
|
<div
|
||
|
|
className="check-box-style"
|
||
|
|
style={{
|
||
|
|
left: activeValue ? "50%" : "2px",
|
||
|
|
background: activeValue ? "" : "var(--text-disabled)",
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
name=""
|
||
|
|
id={`toogle-input-${inputKey}`}
|
||
|
|
defaultChecked={value}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default InputToggle;
|