|
import React, { useState } from 'react'; |
|
import styles from './toggleRow.module.css'; |
|
|
|
const ToggleRow = ({ option }) => { |
|
const [active, setActive] = useState(false); |
|
|
|
return ( |
|
<div className={styles.toggleRow}> |
|
{option} |
|
|
|
<label className={styles.toggle} tabIndex='0'> // add to tab order |
|
<input |
|
className={styles.toggleInput} |
|
type='checkbox' |
|
checked={active} |
|
onChange={() => setActive(!active)} |
|
tabIndex='-1' // remove from tab order |
|
/> |
|
|
|
<span className={styles.toggleSlider}></span> |
|
</label> |
|
</div> |
|
) |
|
} |
|
|
|
export default ToggleRow; |