continuing the translation of the team's view into react

front/views/TeamPanel.tsx

@@ -1,7 +1,5 @@
-
 import '../style/teamPanel.css'
 
-
 interface TeamInfo{
     id: number
     name: string
@@ -17,7 +15,9 @@ interface Team {
 
 interface Member{
     id: number
-
+    name: string
+    mail: string
+    profilePicture: string
     role: string
 }
 
@@ -25,19 +25,31 @@ interface Member{
 export default function TeamPanel({isCoach, team}: {isCoach: boolean, team: Team }){
     return (
         <div>
-            <TeamDisplay name={isCoach ? "vrai je suis coach" : "non"}/>
+            <div>
+                <TeamDisplay team={team.info}/>
+            </div>
+            <div>
+                {isCoach ? () : ()}
+            </div>
+            <div>
+                <h2>Membres :</h2>
+
+            </div>
         </div>
 )
 }
 
-function TeamDisplay({name,picture,mainColor,secondColor}: {name: string,picture : string,mainColor}) {
+function TeamDisplay({ team}: {team : TeamInfo}) {
     return (
         <div>
-            <h1>{name}</h1>
-            <img src={picture} alt="Logo d'équipe" class="logo"/>
+            <div>
+                <h1>{team.name}</h1>
+                <img src={team.picture} alt="Logo d'équipe" />
             </div>
             <div id="colors">
-            <Color/>
+                <Color color={team.mainColor}/>
+                <Color color={team.secondColor}/>
+            </div>
         </div>
     )
 }
@@ -45,9 +57,28 @@ function TeamDisplay({name,picture,mainColor,secondColor}: {name: string,picture
 function Color({color}: {color : string}){
     return(
         <div className="color"><p>Couleur principale : </p>
-            <div className="square" style="background-color:{color}"></div>
+            <div className="square" style={{backgroundColor: color}}></div>
         </div>
     )
 }
 
+function CoachOptions (){
 
+    return (
+        <div>
+            <button id="delete" onClick={confirm('Êtes-vous sûr de supprimer cette équipe?') ? window.location.href = '' : {}}>Supprimer</button>
+
+        </div>
+    )
+}
+
+function MemberDisplay({member}: {member : Member}){
+    return (
+        <div>
+            <img src={member.profilePicture} alt="Photo de profile"/>
+            <p>{member.name}</p>
+            <p>{member.role}</p>
+            <p>{member.mail}</p>
+        </div>
+    )
+}