add page login/register

src/App.jsx

@@ -1,13 +1,12 @@
 import React, { useState } from "react";
-import { RouterProvider, Routes } from "react-router-dom";
-import {FormsData} from "./context";
-import router from "./router/router"
+import { Outlet, useNavigate } from "react-router-dom";
+import { FormsData } from "./context";
 import classes from "./assets/styles/app.module.scss"
 import NavBar from "./components/NavBar.jsx";
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 const App = () => {
-    // const navigate = useNavigate();
+    const navigate = useNavigate();
     const [forms, setForms] = useState([])
 
     return (
@@ -18,12 +17,10 @@ const App = () => {
             <div className={classes.main}>
                 <div className={classes.container}>
                     <div className={classes.header}>
-                        <NavBar/>
+                        <NavBar navigate={navigate}/>                   
                     </div>
                     <div className={classes.content}>
-                        <Routes>
-                            <RouterProvider router={router}/>
-                        </Routes>                        
+                        <Outlet/>
                     </div>
                 </div>
             </div>

src/assets/styles/enterAccount.module.scss

@@ -0,0 +1,103 @@
+.main {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.wrapper {
+    width: 50%;
+    height: 70%;
+}
+
+.tabs {
+    ul {
+        li {
+            width: 50%;
+            cursor: pointer;
+            a {
+                text-align: center;
+                font-family: "Montserrat", sans-serif;
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+.content {
+    width: 100%;
+    height: 100%;
+    // box-shadow: 0 3px 5px 1px rgb(200, 200, 200);
+    border: 1px solid rgb(220, 220, 220);
+    border-top: none;
+    &__wrapper {
+        padding: 2%;
+        width: 100%;
+        height: 100%;
+        &__login {
+            width: 100%;
+            height: 100%;
+            &__header {
+                width: 100%;
+                height: 20%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                h3 {
+                    display: block;
+                    font-size: 25px;
+                    font-family: "Montserrat", sans-serif;
+                    text-align: center;
+                    color: rgb(100, 100, 100);
+                }
+            }
+            &__body {
+                width: 100%;
+                height: 60%;
+                // border: 1px solid red;
+                display: flex;
+                justify-content: space-around;
+                flex-direction: column;
+            }
+            &__footer {
+                width: 100%;
+                height: 20%;
+            }
+        }
+        &__register {
+            width: 100%;
+            height: 100%;
+            &__header {
+                width: 100%;
+                height: 15%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                h3 {
+                    display: block;
+                    font-size: 25px;
+                    font-family: "Montserrat", sans-serif;
+                    color: rgb(100, 100, 100);
+                }
+            }
+            &__body {
+                width: 100%;
+                height: 75%;
+                display: flex;
+                justify-content: space-around;
+                flex-direction: column;
+                padding-bottom: 5px;
+                &__fio {
+                    height: 15%;
+                    display: flex;
+                    justify-content: space-between;
+                }                
+            }
+            &__footer {
+                width: 100%;
+                height: 10%;
+            }
+        }
+    }
+}

src/assets/styles/profile.module.scss

@@ -0,0 +1,7 @@
+.main {
+
+}
+
+.wrapper {
+    
+}

src/components/NavBar.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import classes from "../assets/styles/components/navbar.module.scss"
 
-const NavBar = () => {
+const NavBar = ({navigate}) => {
     const [auth, setAuth] = useState(true);
 
     return (
@@ -10,18 +10,18 @@ const NavBar = () => {
                 <div className={classes.menu}>
                     {auth ? 
                     <div className={classes.menu__authorized}>
-                        <span>Главная</span>
-                        <span>Мои формы</span>
+                        <span onClick={() => navigate("/")}>Главная</span>
+                        <span onClick={() => navigate("/forms")}>Мои формы</span>
                     </div> : 
                     <div></div>}                    
                 </div>
                 <div className={classes.profile}>
                     {auth ? 
                     <div className={classes.profile__authorized}>
-                        <span>Профиль</span>
+                        <span onClick={() => navigate("/profile")}>Профиль</span>
                     </div> : 
                     <div className={classes.profile__nonAuthorized}>
-                        <span>Вход <i class="fa-solid fa-arrow-right-to-bracket"></i></span>       
+                        <span onClick={() => navigate("/enter")}>Вход <i class="fa-solid fa-arrow-right-to-bracket"></i></span>       
                     </div>}                                        
                 </div>
             </div>

src/index.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import App from './App.jsx';
+import { RouterProvider } from 'react-router-dom';
+import router from "./router/router.js"
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
-    <BrowserRouter>
-        <App/>
-    </BrowserRouter>   
+    <RouterProvider router={router}/>
 );

src/pages/EnterAccount.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import classes from "../assets/styles/enterAccount.module.scss";
+import MyInput from "../components/MyInput.jsx";
+import MyButton from "../components/MyButton.jsx";
+
+const EnterAccount = ({navigate}) => {
+    const [enter, setEnter] = useState("login");
+
+    return (
+        <div className={classes.main}>
+            <div className={classes.wrapper}>
+                <div className={classes.tabs}>
+                    <ul class="nav nav-tabs">
+                        <li class="nav-item" onClick={() => setEnter("login")}>
+                            <a className={enter === "login" ? "nav-link active" : "nav-link"} aria-current="page">Авторизация</a>
+                        </li>
+                        <li class="nav-item" onClick={() => setEnter("register")}>
+                            <a className={enter === "register" ? "nav-link active" : "nav-link"}>Регитрация</a>
+                        </li>
+                    </ul>
+                </div>
+                <div className={classes.content}>
+                    <div className={classes.content__wrapper}>
+                        {enter === 'login' ? <div className={classes.content__wrapper__login}>
+                            <div className={classes.content__wrapper__login__header}>
+                                <h3>Войти в аккаунт</h3>
+                            </div>
+                            <div className={classes.content__wrapper__login__body}>
+                                <MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}}/>
+                                <MyInput placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}}/>
+                            </div>
+                            <div className={classes.content__wrapper__login__footer}>
+                                <MyButton text={"Войти"} otherStyle={{height: "60%", width: "20%"}}/>
+                            </div>
+                        </div> : 
+                        <div className={classes.content__wrapper__register}>
+                            <div className={classes.content__wrapper__register__header}>
+                                <h3>Зарегестрировать учетную запись</h3>
+                            </div>
+                            <div className={classes.content__wrapper__register__body}>
+                                <MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
+                                <MyInput placeholder={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
+                                <div className={classes.content__wrapper__register__body__fio}>
+                                    <MyInput placeholder={"Имя"} otherMainStyle={{width: "32%", height: "100%"}} otherInputStyle={{width: "100%"}}/>
+                                    <MyInput placeholder={"Фамилия"} otherMainStyle={{width: "32%", height: "100%"}} otherInputStyle={{width: "100%"}}/>
+                                    <MyInput placeholder={"Отчество (при наличии)"} otherMainStyle={{width: "32%", height: "100%"}} otherInputStyle={{width: "100%"}}/>
+                                </div>                                
+                                <MyInput placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
+                                <MyInput placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}}/>
+                            </div>
+                            <div className={classes.content__wrapper__register__footer}>
+                                <MyButton text={"Создать"} otherStyle={{height: "100%", width: "20%"}}/>
+                            </div>
+                        </div>}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default EnterAccount;

src/pages/Profile.jsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import classes from "../assets/styles/profile.module.scss"
+
+const Profile = ({navigate}) => {
+    return (
+        <div className={classes.main}>
+            <div className={classes.wrapper}>
+                
+            </div>
+        </div>
+    )
+}
+
+export default Profile;

src/router/router.js

@@ -1,22 +1,39 @@
 import React from 'react';
 import { createBrowserRouter } from "react-router-dom";
 import Forms from '../pages/Forms.jsx';
+import EnterAccount from "../pages/EnterAccount.jsx"
 import NewForm from '../pages/NewForm.jsx';
 import Home from "../pages/Home.jsx";
+import App from "../App.jsx";
+import Profile from "../pages/Profile.jsx";
 
 const router = createBrowserRouter([
     {
-        path: "/",
-        element: <Home/>,
-    },
-    {
-        path: "/forms",
-        element: <Forms/>,
-    },
-    {
-        path: '/forms/edit/',
-        element: <NewForm/>
+        element: <App/>,
+        children: [
+            {
+                path: "/",
+                element: <Home/>,
+            },
+            {
+                path: "/forms",
+                element: <Forms/>,
+            },
+            {
+                path: '/forms/edit/',
+                element: <NewForm/>
+            },
+            {
+                path: '/enter',
+                element: <EnterAccount/>
+            },
+            {
+                path: '/profile',
+                element: <Profile/>
+            }
+        ]
     }
+    
 ]);
 
 export default router