social-media/src/views/Profile/PersonnalInfo.vue

<template>
  <div class="flex flex-col items-center w-full">
    <h1 class="uppercase pb-5 text-2xl">
      <v-icon class="mr-2">mdi-information</v-icon> Informations personnelles
    </h1>

    <div class="border rounded-2xl w-full max-w-[800px]">
      <div class="py-5 uppercase ml-4">Information de base</div>

      <div class="flex flex-col w-full">
        <button
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
            @click="openModal('Name')">
          <span class="min-w-40 text-left">Photo de profil</span>
          <span class="flex-auto pr-6 text-left">Une photo de profil aide à personnaliser votre compte</span>
          <span class="flex-none">
            <img
                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
                alt="Profile Image"
                class="ml-2 rounded-full"
                style="width: 48px; height: 48px;">
          </span>
        </button>

        <button
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
            @click="openModal('Name')">
          <span class="pa-2 min-w-40 text-left">Nom</span>
          <span class="flex-auto text-left pr-6">Pascal Marchesseault</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
            @click="openModal('Birthday')">
          <span class="flex-none pa-2 min-w-40 text-left">Date de naissance</span>
          <span class="flex-auto text-left pr-6">27 octobre 1988</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full"
            @click="openModal('Gender')">
          <span class="flex-none pa-2 min-w-40 text-left">Genre</span>
          <span class="flex-auto text-left pr-6">Homme</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>
      </div>
    </div>
  </div>

  <!-- Phone & email -->
  <div class="flex flex-col items-center mt-10 w-full">
    <div class="border rounded-2xl w-full max-w-[800px]">
      <div class="py-5 uppercase ml-4">Coordonnées</div>

      <div class="flex flex-col w-full">
        <button
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
            @click="openModal('Email')">
          <span class="min-w-40 text-left">Courriel</span>
          <span class="flex-auto pr-6 text-left">marchesseault_pascal@hotmail.com</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
            @click="openModal('Phone')">
          <span class="pa-2 min-w-40 text-left">Téléphone</span>
          <span class="flex-auto text-left pr-6">(581) 999-7540</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>
      </div>
    </div>
  </div>

  <!-- Address -->
  <div class="flex flex-col items-center mt-10 w-full">
    <div class="border rounded-2xl w-full max-w-[800px]">
      <div class="py-5 uppercase ml-4">Adresses</div>

      <div class="flex flex-col w-full">
        <button
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
            @click="openModal('AdressesHome')">
          <span class="min-w-40 text-left">Domicile</span>
          <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
            @click="openModal('AdressesWork')">
          <span class="pa-2 min-w-40 text-left">Travail</span>
          <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <v-dialog v-model="dialog" max-width="600px">
    <v-card>
      <v-card-title>
      
        <v-spacer></v-spacer>
      
      </v-card-title>
      <v-card-text>
        <component :is="currentComponent"></component>
      </v-card-text>
    </v-card>
  </v-dialog>

</template>

<script setup>
import { ref } from 'vue';
import Name from '@/views/Profile/Dialogs/PersonnalInfo/Name.vue';
import AdressesHome from '@/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue';
import AdressesWork from '@/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue';
import Birthday from '@/views/Profile/Dialogs/PersonnalInfo/Birthday.vue';
import Email from '@/views/Profile/Dialogs/PersonnalInfo/Email.vue';
import Gender from '@/views/Profile/Dialogs/PersonnalInfo/Gender.vue';
import Phone from '@/views/Profile/Dialogs/PersonnalInfo/Phone.vue';

const dialog = ref(false);
const currentComponent = ref('');

const componentsMap = {
  Name,
  AdressesHome,
  AdressesWork,
  Birthday,
  Email,
  Gender,
  Phone
};

const openModal = (component) => {
  currentComponent.value = componentsMap[component];
  dialog.value = true;
};
</script>

<style>
.HoverBtn:hover {
  @apply bg-[#A6147D] text-white;
  @apply hover:opacity-90; /* Réduire l'opacité au survol */
}
</style>