w-aura/src/components/FreePeriodInfoPage/index.tsx

39 lines
1.1 KiB
TypeScript

import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import Title from '../Title'
import routes from '@/routes'
import styles from './styles.module.css'
import { useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { actions } from '@/store'
function FreePeriodInfoPage(): JSX.Element {
const { t } = useTranslation()
const navigate = useNavigate()
const dispatch = useDispatch()
const updateCoordinates = useCallback((X: number, Y: number) => {
dispatch(actions.aura.update({
coordinates: {
X,
Y
}
}))
}, [dispatch])
const handleNext = (e: any) => {
const X = e.clientX || Math.round(e.touches[0].clientX)
const Y = e.clientY || Math.round(e.touches[0].clientY)
updateCoordinates(X, Y)
navigate(routes.client.createProfile())
}
return (
<section className={`${styles.page} page`} onMouseDown={handleNext} onTouchStart={handleNext}>
<div className={styles.content}>
<Title variant='h4' className={styles.title}>{t('touch_screen')}</Title>
</div>
</section>
)
}
export default FreePeriodInfoPage