55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { debounce } from 'debounce'
|
|
|
|
import { setMaxLength, setWpm, setOffset, setLang } from '../store/actions'
|
|
import { Slider } from './Slider'
|
|
import { selectOffset, selectLang } from '../store/selectors'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
const availableLanguages = ['en', 'de']
|
|
|
|
export const Options = () => {
|
|
const { t } = useTranslation()
|
|
const dispatch = useDispatch()
|
|
const maxLength = useSelector(state => state.maxLength)
|
|
const wpm = useSelector(state => state.wpm)
|
|
const offset = useSelector(selectOffset)
|
|
const lang = useSelector(selectLang)
|
|
|
|
return (
|
|
<div>
|
|
<h2>{t('options.title')}</h2>
|
|
<Slider
|
|
title={t('options.maxLength')}
|
|
min={3}
|
|
max={15}
|
|
value={maxLength}
|
|
onChange={debounce(val => dispatch(setMaxLength(val)), 100)}
|
|
/>
|
|
<Slider
|
|
title={t('options.wpm')}
|
|
min={100}
|
|
max={1000}
|
|
value={wpm}
|
|
onChange={debounce(val => dispatch(setWpm(val)), 50)}
|
|
/>
|
|
<Slider
|
|
title={t('options.offset')}
|
|
min={-50}
|
|
max={50}
|
|
value={offset}
|
|
onChange={val => dispatch(setOffset(val))}
|
|
/>
|
|
<label>
|
|
Language:
|
|
<select value={lang} onChange={e => dispatch(setLang(e.target.value))}>
|
|
{availableLanguages.map(l => (
|
|
<option key={l}>{l}</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
)
|
|
}
|