35 lines
639 B
TypeScript
35 lines
639 B
TypeScript
|
import styles from './Toggle.module.css'
|
||
|
|
|
||
|
|
interface ToggleProps {
|
||
|
|
className?: string
|
||
|
|
offLabel?: string
|
||
|
|
onLabel?: string
|
||
|
|
name: string
|
||
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||
|
|
checked: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Toggle = ({
|
||
|
|
className = '',
|
||
|
|
offLabel = 'Off',
|
||
|
|
onLabel = 'On',
|
||
|
|
name = '',
|
||
|
|
onChange,
|
||
|
|
checked,
|
||
|
|
}: ToggleProps) => {
|
||
|
|
return (
|
||
|
|
<label className={`${styles.toggle} ${className}`}>
|
||
|
|
{offLabel}
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
name={name}
|
||
|
|
id={name}
|
||
|
|
checked={checked}
|
||
|
|
onChange={onChange}
|
||
|
|
/>
|
||
|
|
<span></span>
|
||
|
|
{onLabel}
|
||
|
|
</label>
|
||
|
|
)
|
||
|
|
}
|