48f1d5e623
* Add Toggle component * Add default units to settings * Add defaultBaseUnit, shorten settings names * Make debug panel use Toggle, fix colors * add eslint-plugin-css-modules
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>
|
|
)
|
|
}
|