Clyde/frontend/src/Apps/Profil.vue

<script setup>
  import {reactive} from 'vue'
  const example =reactive({
  profilPicture:"../assets/clyde.png",
  type:"Inscription",
  lastName:"Ghost",
  firstName:"Clyde",
  role:"student",
  address: "Radiator Springs",
  email:"ClydeGhost@gmail.com",
  cursus:{
  cours1:{  "id": 12,
  "name": "Math pour l'info",
  "credits": 11,
  "faculty": "science",
  "teacher": 42,
  "Assistants": []},
  cours2:{ 
  "id": 42,
  "name": "Fonctionnement des ordinateurs",
  "credits": 11,
  "faculty": "science",
  "teacher": 42,
  "Assistants": []},

  },
  option:"IT",
  degree:"BAC1",
  })
</script>



<template>
  <div class="body">
  <div class="container">
    <div class="profilPic">
      <img class="subContainter" src="../assets/Clyde.png">
    </div>
      <div class="globalInfos">
        <div  style="padding-bottom:50px;border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;" >
          <div>
            {{example.firstName}} {{example.lastName.toUpperCase()}}   
          </div>
          <div>
            E-mail: {{example.email}}      
          </div>
          <div>
           {{example.option}} {{example.role.toUpperCase()}} 
          </div>
        </div>
      </div>
      <div class="moreInfos">
        <div v-if="(example.role==='student')">
          <div style="display: flex;
    justify-content: center;
    align-items: center;width:200px;margin-left:auto;margin-right:auto;border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;margin-bottom:10px;">
           Liste des cours
          </div>
        <div  style="border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;margin-bottom:10px;"
          v-for="item in example.cursus">
          {{item.name}} Teacher: {{item.teacher}} Credits:{{item.credits}}   
          </div>
        </div>
      </div>
  </div>
</div>
</template>
<style scoped>

.container{
  
  display:grid;
  grid-template-columns:200px 900px;
  grid-template-rows:200px auto;
  column-gap:30px;
  row-gap:25px;
  grid-template-areas:
  "profilPic globalInfos"
  "minfos minfos";
}

.profilPic{
  grid-area:profilPic;
}

.globalInfos {
  grid-area:globalInfos;
  align-self :center;

}

.subContainter{
  width:100%;
  background-color:rgb(50,50,50);
  border-radius:20px;
  border:4px solid black;
}

.moreInfos {
  grid-area:minfos;
}
.body {
    width:100%;
    margin-bottom:10px;
  }

</style>