Modif main (passage sous react)

src/App.js

@@ -15,6 +15,8 @@ function App() {
                     <Route path="/" element={<MainPage />} />
                     <Route path="/sign-up" element={<Register />} />
                     <Route path="/sign-in" element={<Login />} />
+                    <Route path="/main" element={<MainPage/>} />
+                    <Route path="/main/:id" element={<MainPage/>} />
                     <Route path="/*" element={<MainPage />} />
                 </Routes>
             </BrowserRouter>

src/components/login/Login.js

@@ -40,7 +40,7 @@ export default function Login() {
                         </div>
                         <div className={"Href"}>
                             <a href="src/components/login#">J'ai oublier mon mot de passe</a>
-                            <a href="/signup">Je n'ai pas encore de compte</a>
+                            <a href="/sign-up">Je n'ai pas encore de compte</a>
                         </div>
 
                     </form>

src/components/main/Main.js

@@ -46,24 +46,28 @@ export function MainPage() {
                 </div>
             </div>
         </div>
-
         <div id="schemas-section">
-            <h2>Mes schémas</h2>
+            <div id="schemas-list-h">
+                <h2>Mes Schémas</h2>
+            </div>
             <div id="schemas-list">
-
-                {/*<div class="shema-item">*/}
-                {/*    <img src="logo.png"/>*/}
-                {/*    <p class="shema-name">Shéma 1</p>*/}
-                {/*</div>*/}
-                {/*<div class="shema-item">*/}
-                {/*    <img src="logo2.png"/>*/}
-                {/*    <p class="shema-name">Shéma 2</p>*/}
-                {/*</div>*/}
-                {/*<div class="shema-item">*/}
-                {/*    <img src="logo2.png"/>*/}
-                {/*    <p class="shema-name">Shéma 3</p>*/}
-                {/*</div>*/}
-
+                {/*afficher la liste des Schémas*/}
+                <div className="schemas-item">
+                    <img src={require("../../img/Visualiseur.png")}/>
+                    <p className="schemas-name">Schéma 1</p>
+                </div>
+                <div className="schemas-item">
+                    <img src={require("../../img/Visualiseur.png")}/>
+                    <p className="schemas-name">Schéma 2</p>
+                </div>
+                <div className="schemas-item">
+                    <img src={require("../../img/Visualiseur.png")}/>
+                    <p className="schemas-name">Schéma 3</p>
+                </div>
+                <div className="schemas-item">
+                    <img src={require("../../img/Visualiseur.png")}/>
+                    <p className="schemas-name">Schéma 3</p>
+                </div>
             </div>
         </div>
     </>

src/css/main.css

@@ -98,35 +98,32 @@ body{
     box-shadow: 2px 2px #A7A7A7;
 }
 
-
-
-#schema-section {
+#schemas-section {
     display: flex;
     flex-direction: column;
     padding: 60px;
     background-color: #f2f2f2;
     border-radius: 10px 10px 10px 10px;
-    margin: 10px;
     box-shadow: 5px 5px #1B1B1B;
+    margin: 10px;
 
 }
 
-#schema-section h2 {
+#schemas-section h2 {
     text-align: center;
     font-size: 24px;
     margin-top: 0;
     margin-bottom: 5px;
 }
 
-
-#schema-list {
+#schemas-list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     overflow: hidden;
     justify-content: center;
 }
-.schema-item {
+.schemas-item {
     padding: 15px 15px 5px;
     display: flex;
     flex-direction: column;
@@ -141,16 +138,16 @@ body{
     box-shadow: 3px 3px #585858;
 }
 
-.schema-item .schema-name {
+.schemas-item .schemas-name {
     margin-bottom: 3px;
 }
 
-.schema-name {
+.schemas-name {
     font-size: 18px;
     margin-top: 10px;
 }
 
-.schema-item img {
+.schemas-item img {
     border-radius: 15px;
     width: 100%;
     height: auto;
@@ -160,5 +157,3 @@ body{
     box-shadow: 2px 2px #A7A7A7;
 }
 
-
-