add components register and login

SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx

@@ -0,0 +1,57 @@
+import { Link } from "react-router-dom";
+import styles from './RegisterForm.module.css';
+import { useState } from 'react';
+
+const RegisterForm = () => {
+    const [focused, setFocused] = useState({
+        name: false,
+        surname: false,
+        email: false,
+        password: false
+    });
+    return (
+        <div className={styles.registerContainer}>
+            <h2 className={styles.title}>Регистрация</h2>
+            <form className={styles.form}>
+                <input
+                    className={`${styles.input} ${styles.name}`}
+                    type={'text'}
+                    placeholder='Имя'
+                    onFocus={() => setFocused({ ...focused, name: true })}
+                    onBlur={() => setFocused({ ...focused, name: false })}
+                    style={{ color: focused.name ? 'black' : 'inherit' }}
+                />
+                <input
+                    className={`${styles.input} ${styles.surname}`}
+                    type={'text'}
+                    placeholder='Фамилия'
+                    onFocus={() => setFocused({ ...focused, surname: true })}
+                    onBlur={() => setFocused({ ...focused, surname: false })}
+                    style={{ color: focused.surname ? 'black' : 'inherit' }}
+                />
+                <input
+                    className={`${styles.input} ${styles.email}`}
+                    type={'email'}
+                    placeholder='Почта'
+                    onFocus={() => setFocused({ ...focused, email: true })}
+                    onBlur={() => setFocused({ ...focused, email: false })}
+                    style={{ color: focused.email ? 'black' : 'inherit' }}
+                />
+                <input
+                    className={`${styles.input} ${styles.password}`}
+                    type='password'
+                    placeholder='Пароль'
+                    onFocus={() => setFocused({ ...focused, password: true })}
+                    onBlur={() => setFocused({ ...focused, password: false })}
+                    style={{ color: focused.password ? 'black' : 'inherit' }}
+                />
+                <button className={styles.signUp}>Зарегистрироваться</button>
+            </form>
+            <p className={styles.recommendation}>Уже с нами?
+                <Link className={styles.recommendationLink} to='/login'>Войдите!</Link>
+            </p>
+        </div>
+    );
+}
+
+export default RegisterForm;