82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
|
import React, { useState, useCallback } from 'react';
|
|||
|
|
|
|||
|
|
import logo from '../assets/logo-white.svg';
|
|||
|
|
import arrow from '../assets/36-arrow-right.svg';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
MainWrapper,
|
|||
|
|
InputElement,
|
|||
|
|
InputLabel,
|
|||
|
|
InputWrapper,
|
|||
|
|
LogoImg,
|
|||
|
|
ArrowImg,
|
|||
|
|
IconButton,
|
|||
|
|
StartWrapper,
|
|||
|
|
StartI,
|
|||
|
|
StartInput,
|
|||
|
|
StartLabel,
|
|||
|
|
} from './style';
|
|||
|
|
|
|||
|
|
const Input = ({ onStart }) => {
|
|||
|
|
const [value, setValue] = useState('');
|
|||
|
|
const handleChange = useCallback(event => {
|
|||
|
|
setValue(event.target.value.toUpperCase())
|
|||
|
|
}, [setValue]);
|
|||
|
|
|
|||
|
|
const handleSubmit = useCallback((event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
if (value === 'SBER') {
|
|||
|
|
onStart()
|
|||
|
|
}
|
|||
|
|
}, [value])
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<form onSubmit={handleSubmit}>
|
|||
|
|
<InputWrapper>
|
|||
|
|
<InputLabel
|
|||
|
|
htmlFor='input'
|
|||
|
|
>
|
|||
|
|
Ввод:
|
|||
|
|
</InputLabel>
|
|||
|
|
<InputElement
|
|||
|
|
value={value}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
id="input"
|
|||
|
|
autoComplete="off"
|
|||
|
|
/>
|
|||
|
|
<IconButton type="submit">
|
|||
|
|
<ArrowImg src={arrow} />
|
|||
|
|
</IconButton>
|
|||
|
|
</InputWrapper>
|
|||
|
|
</form>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const Start = () => {
|
|||
|
|
return (
|
|||
|
|
<StartWrapper>
|
|||
|
|
<StartInput
|
|||
|
|
id="check"
|
|||
|
|
type="checkbox"
|
|||
|
|
/>
|
|||
|
|
<StartLabel
|
|||
|
|
htmlFor='check'
|
|||
|
|
>
|
|||
|
|
<StartI>СТАРТ</StartI>
|
|||
|
|
</StartLabel>
|
|||
|
|
</StartWrapper>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const MainPage = () => {
|
|||
|
|
const [showStart, setShowStart] = useState(false);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<MainWrapper>
|
|||
|
|
<LogoImg src={logo} />
|
|||
|
|
{!showStart && <Input onStart={() => setShowStart(true)} />}
|
|||
|
|
{showStart && <Start />}
|
|||
|
|
</MainWrapper>
|
|||
|
|
);
|
|||
|
|
};
|