init

src/pages/main.tsx

@@ -0,0 +1,81 @@
+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>
+    );
+};