| 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; |