Files
userjs-jop/src/components/Checkbox.tsx
2024-09-21 15:11:19 +08:00

32 lines
761 B
TypeScript

import Tooltip from "./Tooltip";
interface CheckboxProps {
label: string;
value: boolean;
tip?: string;
onChange: (checked: boolean) => void;
}
const Checkbox = ({ label, value, tip, onChange }: CheckboxProps): JSX.Element => {
const handleChange = (event: JSX.TargetedEvent<HTMLInputElement>) => {
onChange(event.currentTarget.checked);
};
return (
<label className="jop-checkbox">
<input
type="checkbox"
className="jop-checkbox-input"
checked={value}
onChange={handleChange}
/>
<span className="jop-checkbox-custom"></span>
<Tooltip content={tip || ""}>
<span className="jop-checkbox-label">{label}</span>
</Tooltip>
</label>
);
};
export default Checkbox;