33 lines
808 B
JavaScript
33 lines
808 B
JavaScript
import React from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { debounce } from 'debounce'
|
|
|
|
import { setMaxLength, setWpm } from '../store/actions'
|
|
import { Slider } from './Slider'
|
|
|
|
export const Options = () => {
|
|
const dispatch = useDispatch()
|
|
const maxLength = useSelector(state => state.maxLength)
|
|
const wpm = useSelector(state => state.wpm)
|
|
|
|
return (
|
|
<div>
|
|
<h2>Options</h2>
|
|
<Slider
|
|
title={'Maximum segment length'}
|
|
min={3}
|
|
max={15}
|
|
value={maxLength}
|
|
onChange={debounce(val => dispatch(setMaxLength(val)), 100)}
|
|
/>
|
|
<Slider
|
|
title={'Words per minute'}
|
|
min={100}
|
|
max={1000}
|
|
value={wpm}
|
|
onChange={debounce(val => dispatch(setWpm(val)), 50)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|