hensei-web/components/ToggleSwitch/index.tsx
2022-01-24 21:54:50 -08:00

31 lines
No EOL
783 B
TypeScript

import React from 'react'
import './index.scss'
interface Props {
name: string
checked: boolean
editable: boolean
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}
const ToggleSwitch: React.FC<Props> = (props: Props) => {
return (
<div className="toggle-switch">
<input
type="checkbox"
checked={props.checked}
disabled={!props.editable}
className="toggle-switch-checkbox"
name={props.name}
id={props.name}
onChange={props.onChange}
/>
<label className="toggle-switch-label" htmlFor={props.name}>
<span className="toggle-switch-switch" />
</label>
</div>
);
}
export default ToggleSwitch