add componentes NewPoste

Site Web/client/src/components/AjoutLien.js

@@ -1,9 +1,15 @@
-import React from 'react';
+import React, {useState} from 'react';
+import NewPoste from "./NewPoste";
 
 const AjoutLien = () => {
+
+    const handleModals = (e) => {
+        <NewPoste/>
+    }
+
     return (
         <div className='ajoutLien'>
-            <button className="bouttonAjoutLien" type='bouton'>
+            <button className="bouttonAjoutLien" id="display" type='bouton' onClick={handleModals}>
                 Poster un lien
             </button>
         </div>

Site Web/client/src/components/NewPoste.js

@@ -0,0 +1,41 @@
+import axios from 'axios';
+import React, { useState } from 'react';
+
+
+//e.preventDefaul(); pour ne pas recharcher la page
+const NewPoste = (props) => {
+    return (
+        <div>
+            <div class="newPoste-form-popup" id="newPoste-popupFormulaireCreationPoste">
+                <form action="/action_page.php" class="newPoste-form-container">
+                    <div class="newPoste-input">
+                        <label for="lien">Lien:</label>
+                        <input type="text" name="lien" required />
+                    </div>
+                    <div class="newPoste-input">
+                        <label for="description">Description:</label>
+                        <textarea name="description" row="250"></textarea>
+                    </div>
+
+                    <div id="newPoste-buttonForm">
+                        <div>
+                            <button type="button" class="newPoste-btn-cancel" onclick="closeForm()">retour</button>
+                        </div>
+                        <div>
+                            <button type="submit" class="newPoste-btn">Poster</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+
+
+
+
+
+    );
+};
+
+//ce qui écrit dans le input est récuperé par le state
+export default NewPoste;

Site Web/client/src/pages/HomeNavigation.js

@@ -2,8 +2,10 @@ import React, { useContext } from 'react';
 import { UidContext } from '../components/AppContext';
 import Log from '../components/Log'
 import Home from './Home';
-import Poste from '../components/Poste';
+
 import { NavLink } from 'react-router-dom';
+import NewPoste from "../components/NewPoste";
+import AjoutLien from "../components/AjoutLien";
 //<Link to="/discover"/>
 
 const HomeNavigation = () => {
@@ -18,6 +20,8 @@ const HomeNavigation = () => {
                     <Log  signin={true} signup={false}/>
                 </div>
             )}
+            <AjoutLien></AjoutLien>
+            <NewPoste></NewPoste>
         </div>
     );
 };

Site Web/client/src/styles/component/_newPoste.scss

@@ -0,0 +1,43 @@
+.newPoste-form-popup {
+  background-color: white;
+  display: none;
+  position:fixed;
+
+  margin-left:33%;
+  margin-right: 33%;
+  border: 2px solid #666;
+  border-radius:10px;
+  width: 33%;
+}
+
+/* Largeur complète pour les champs de saisie */
+.newPoste-form-container input[name="lien"],
+.newPoste-form-container textarea[name="description"],
+.newPoste-form-container label{
+  width: 80%;
+  margin: 10px 10% 50px 10%;
+}
+
+textarea{
+  resize: none;
+  height: 100px;
+}
+
+input[name="lien"],
+textarea[name="description"]{
+  margin-left: 100px;
+  border: none;
+  background: #D9D9D9;
+}
+
+.newPoste-input{
+  margin-top:20px;
+}
+
+#newPoste-buttonForm{
+  margin-left:10%;
+  margin-right:10%;
+  margin-bottom:10px;
+  display:flex;
+  justify-content: space-between;
+}

Site Web/client/src/styles/index.scss

@@ -5,3 +5,5 @@
 @import './component/poste';
 @import './pages/configuration';
 @import './component/ajoutLien';
+@import './component/newPoste';
+