Creation component ButtonTactic

front/style/home.css

@@ -36,7 +36,9 @@
 
 #sideMenu {
     background-color: grey;
-
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     overflow: hidden;
 }
 
@@ -49,9 +51,14 @@
     margin-right : 5%;
 }
 
+#sideMenuContent {
+    width: 90%;
+}
 .titreSideMenu {
     border-bottom: black solid 2px;
-    width: 95%;
+    width: 100%;
+    margin-bottom: 3%;
+
 
 }
 
@@ -62,8 +69,10 @@
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: black;
-    padding : 1.5%;  
+    padding : 1.5%;
     margin-bottom: 0px;
+    margin-right: 3%;
+  
 }
 
 #bodyPersonalSpace {
@@ -89,10 +98,41 @@
 }
 .dataTactic {
     border : 2px solid black;
-    /* border-radius: 10%; */
+    border-radius: 0.75cap;
 }
 
 .dataTactic:hover {
     background-color: red;
     cursor : pointer;
-}
+}
+
+.listTactic {
+    border: 2px solid green;
+    display: block;
+}
+
+ul {
+    border : pink solid 1px;
+}
+
+#SetButtonTactic {
+    border: 0px solid brown;
+    width: 80%;
+    margin-left : 5%;
+    margin-top : 5%;
+}
+
+
+.ButtonLastTactic {
+    border : black solid 1px;
+    border-radius :0.5cap;
+    width :fit-content;
+    padding: 2%;
+    margin-top: 3%;
+    overflow: hidden;
+}
+
+.ButtonLastTactic:hover {
+    background-color: red;
+    cursor : pointer;
+}

front/views/Home.tsx

@@ -51,8 +51,10 @@ export function SideMenu({ width, lastTactics, teams } : { width : number, lastT
         <div id="sideMenu" style={{
             width : width + "%",
         }}>
-            <Team teams={teams}/>
-            <Tactic lastTactics={lastTactics}/>
+            <div id="sideMenuContent">
+                <Team teams={teams}/>
+                <Tactic lastTactics={lastTactics}/>
+            </div>
         </div>
     )
 }
@@ -151,24 +153,36 @@ export function Team({teams} : {teams : Team[]}) {
 }
 
 export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {
-
-    const listTactic = lastTactics.map(tactic => 
-        <li
-            key = {tactic.id}
-        > 
-            {tactic.name} : {tactic.creation_date}
-            <button onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>open</button>
-        </li>
-    );
     return (
         <div id="tactic">
             <div className="titreSideMenu">
                 <h2 className="title">Mes dernières stratégies</h2>
                 <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
              </div>
-            <ul>
-                {listTactic}
-            </ul>
+            <SetButtonTactic tactics={lastTactics}/>
         </div>
+    )
+}
+
+
+function SetButtonTactic ({tactics} : {tactics : Tactic[]}) {
+    const lastTactics = tactics.map(tactic => 
+        <ButtonLastTactic tactic={tactic} />
     );
-}
+    return (
+        <div id="SetButtonTactic">
+            {lastTactics}
+        </div>
+    );
+}
+function ButtonLastTactic ({tactic} : {tactic : Tactic}) {
+    return (
+        <div 
+            id={"Button"+tactic.id} 
+            className="ButtonLastTactic"
+            onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}
+        >
+            {tactic.name}
+        </div>
+    );
+}