Ajout de modules node et de quelques composants

src/App.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+
+import Navbar from "./components/Navbar/";
+import Home from "./pages/Home/";
+import SignupPage from "./pages/Signup";
+import LoginPage from "./pages/Login/";
+
+const App = () => {
+	return (
+		<div className="App">
+			<Router>
+				<Navbar />
+				<section className="pages">
+					<Switch>
+						<Route exact path="/">
+							<Home />
+						</Route>
+						<Route exact path="/login">
+							<LoginPage />
+						</Route>
+						<Route exact path="/Signup">
+							<SignupPage />
+						</Route>
+					</Switch>
+				</section>
+			</Router>
+		</div>
+	);
+};
+
+export default App;

src/assets/img/star-svgrepo-com.svg

@@ -26,33 +26,4 @@
 	</g>
 </g>
 <g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
 </svg>

src/components/Navbar/index.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import "./index.scss";
 import Star from "../../assets/img/star-svgrepo-com.svg";
 
@@ -6,7 +7,7 @@ const Navbar = () => {
 	return (
 		<div className="navbar">
 			<div className="navbar__LeftSide">
-				<a href="">
+				<Link to="/">
 					<img
 						src={Star}
 						class="navbar__Icon"
@@ -15,7 +16,17 @@ const Navbar = () => {
 						height="25"
 					/>
 					<p class="navbar__BrandName">Registra</p>
-				</a>
+				</Link>
+			</div>
+			<div className="navbar__RightSide">
+				<Link to="/signup">
+					<button>S'inscrire</button>
+				</Link>
+				<Link to="/login">
+					<button>Se connecter</button>
+				</Link>
+				<button>Profil</button>
+				<button>Déconnexion</button>
 			</div>
 		</div>
 	);

src/components/Navbar/index.scss

@@ -1,31 +1,43 @@
 .navbar{
-  position: sticky;
+  display: flex;
+  align-items:center;
+  justify-content: space-between;
   background-color: #262626;
   height: 50px;
   width: 100%;
   margin-top: 5px;
 
+
   &:before{
     content: '';
     background: linear-gradient(to right, #B4D4F2, #F2B4D4, #D4F2B4);
     display: block;
-    position: relative;
-    top: -5px;
+    position: absolute;
+    top: 0px;
     width: 100%;
     height: 5px;
   }
   
   .navbar__LeftSide{
-    display: flex;
-    flex-direction: row;
-    justify-content: start;
     margin-left: 15px;
-    width: 33%;
-
-    .navbar__Icon{}
+    a{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100px;
+    }
 
     .navbar__BrandName{
       font-family: monospace;
+      font-weight: 600;
+      color: #F2B4D4;
     }
   }
+
+  .navbar__RightSide{
+    display: flex;
+    justify-content: space-between;
+    width: 350px;
+    margin-right: 15px;
+  }
 } 

src/components/forms/LoginForm/index.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./index.scss";
+
+const LoginForm = () => {
+	return (
+		<div className="LoginForm">
+			<form>
+				<label for="email">Adresse email</label>
+				<input type="email" id="email" name="email" />
+				<label for="password">Mot de passe</label>
+				<input type="password" id="password" name="password" />
+			</form>
+		</div>
+	);
+};
+
+export default LoginForm;

src/components/forms/SignupForm/index.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import "./index.scss";
+
+const SignupForm = () => {
+	return (
+		<div className="signupForm">
+			<form>
+				<label for="username">Nom d'utilisateur</label>
+				<input type="text" id="username" name="username" />
+				<label for="email">Adresse email</label>
+				<input type="email" id="email" name="email" />
+				<label for="password">Mot de passe</label>
+				<input type="password" id="password" name="password" />
+				<label for="confirm_password">Confirmation du mot de passe</label>
+				<input type="password" id="confirm_password" name="confirm_password" />
+			</form>
+		</div>
+	);
+};
+
+export default SignupForm;

src/components/forms/SignupForm/index.scss

@@ -0,0 +1,15 @@
+.signupForm{
+  display: flex; 
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+
+  form{
+    display: flex;
+    flex-direction: column;
+
+    input{
+      margin-bottom: 10px;
+    }
+  }
+}

src/main.jsx

@@ -1,12 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./main.css";
-import App from "./pages/App/App.jsx";
-import Navbar from "./components/Navbar/index";
+import "./main.scss";
+import App from "./App.jsx";
 
 ReactDOM.render(
 	<React.StrictMode>
-		<Navbar />
 		<App />
 	</React.StrictMode>,
 	document.getElementById("root"),

src/pages/App/App.css

@@ -1,42 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-button {
-  font-size: calc(10px + 2vmin);
-}

src/pages/App/App.jsx

@@ -1,10 +0,0 @@
-import React, { useState } from "react";
-import "./App.css";
-
-const App = () => {
-	const [count, setCount] = useState(0);
-
-	return <div className="App"></div>;
-};
-
-export default App;

src/pages/Home/index.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Home = () => {
+	return (
+		<div className="test">
+			<h2>Home</h2>
+		</div>
+	);
+};
+
+export default Home;

src/pages/Login/index.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import LoginForm from "../../components/forms/LoginForm/";
+
+const LoginPage = () => {
+	return (
+		<div class="LoginPage">
+			<h2>Page de connexion</h2>
+			<LoginForm />
+		</div>
+	);
+};
+
+export default LoginPage;

src/pages/Signup/index.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import "./index.scss";
+import SignupForm from "../../components/forms/SignupForm";
+
+const SignupPage = () => {
+	return (
+		<div class="SignupPage">
+			<h2>Page d'inscription</h2>
+			<SignupForm />
+		</div>
+	);
+};
+
+export default SignupPage;

src/pages/Signup/index.scss

@@ -0,0 +1,5 @@
+.SignupPage{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}