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

<script setup>
import {ref} from 'vue';
import ModalFacebook from '@/views/Profile/Dialogs/PageInformations/ModalFacebook.vue';
import ModalInstagram from '@/views/Profile/Dialogs/PageInformations/ModalInstagram.vue';
import ModalLinkedIn from '@/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue';
import ModalReddit from '@/views/Profile/Dialogs/PageInformations/ModalReddit.vue';
import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vue';
import ModalWebsite from '@/views/Profile/Dialogs/PageInformations/ModalWebsite.vue';
import ModalX from '@/views/Profile/Dialogs/PageInformations/ModalX.vue';
import ModalYoutube from '@/views/Profile/Dialogs/PageInformations/ModalYoutube.vue';
import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue';
import ColorTopBanner from '@/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue';
import ColorBottomBanner from "@/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue";
import ProfilePicturePicker from "@/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue";
import ColorBorder from "@/views/Profile/Dialogs/PageInformations/ColorBorder.vue";
import ColorMenu from "@/views/Profile/Dialogs/PageInformations/ColorMenu.vue";
import {useUserStore} from "@/stores/userStore.js";

const userStore = useUserStore()

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

const componentsMap = {
  ModalFacebook,
  ModalInstagram,
  ModalLinkedIn,
  ModalReddit,
  ModalTikTok,
  ModalWebsite,
  ModalX,
  ModalYoutube,
  BannerPicker,
  ColorTopBanner,
  ColorBottomBanner,
  ProfilePicturePicker,
  ColorBorder,
  ColorMenu
};

const openDialog = (component) => {
  currentComponent.value = componentsMap[component]
  dialog.value = true
}

const closeDialog = () => {
  currentComponent.value = null
  dialog.value = false
}

</script>

<template>
  
  <v-dialog v-model="dialog" max-width="600px">
    <v-card>
      <v-card-text>
        <component :is="currentComponent"
                   :creator="userStore.creator"
                   @closeRequested="closeDialog()"
        ></component>
      </v-card-text>
    </v-card>
  </v-dialog>
  
  <div class="flex flex-col items-center w-full">
    <h1 class="uppercase pb-5 text-2xl">
      <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
      Informations de votre page
    </h1>

    <div class="border rounded-2xl w-full max-w-[800px]">
      <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
      <div class="flex flex-col w-full">

        <button
            @click="openDialog('ColorTopBanner')"
            class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5 hover:brightness-150">
          <v-icon>mdi-eyedropper-variant</v-icon>
        </button>

        <button>
          <img
              @click="openDialog('BannerPicker')"
              :src="userStore.creator.storedDataUrls.bannerPictureUrl"
              class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
              alt="Tutorial Banner"
          >
        </button>

        <button
            @click="openDialog('ColorBottomBanner')"
            class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150">
          <v-icon>mdi-eyedropper-variant</v-icon>
        </button>

        <button class="flex justify-center my-5">
          <img
              @click="openDialog('ProfilePicturePicker')"
              class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
              src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
              alt="Profile Image"
          >
        </button>

        <button
            @click="openDialog('ColorBorder')"
            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">
          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
          <span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
          <span class="flex-none">
        <v-icon>mdi-eyedropper-variant</v-icon>
          </span>
        </button>

        <button
            @click="openDialog('ColorMenu')"
            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">
          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
          <span class="flex-auto text-left pr-6">couleur des entêtes de menus</span>
          <span class="flex-none">
           <v-icon>mdi-eyedropper-variant</v-icon>
          </span>
        </button>
      </div>
    </div>

    <!-- Réseaux sociaux -->
    <div class="mt-10 border rounded-2xl w-full max-w-[800px]">
      <div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
      <div class="flex flex-col w-full">
        <button
            @click="openDialog('ModalFacebook')"
            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">
          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
          <span class="flex-auto text-left pr-6">Facebook</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            @click="openDialog('ModalInstagram')"
            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">
          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
          <span class="flex-auto text-left pr-6">Instagram</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            @click="openDialog('ModalX')"
            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">
          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png"
                                                                class="w-5 h-5"></span>
          <span class="flex-auto text-left pr-6">X</span>
          <span class="flex-none">          
                        <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            @click="openDialog('ModalLinkedIn')"
            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 ">
          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
          <span class="flex-auto text-left pr-6">LinkedIn</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            @click="openDialog('ModalTikTok')"
            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 ">
          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/externals/tiktok-black.png"
                                                                class="w-5 h-5"></span>
          <span class="flex-auto text-left pr-6">TikTok</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            @click="openDialog('ModalYoutube')"
            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 ">
          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
          <span class="flex-auto text-left pr-6">Youtube</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            @click="openDialog('ModalReddit')"
            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 ">
          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
          <span class="flex-auto text-left pr-6">Reddit</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

        <button
            @click="openDialog('ModalWebsite')"
            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  ">
          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
          <span class="flex-auto text-left pr-6">Site web personnel</span>
          <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>


      </div>
    </div>
  </div>

</template>

<style>

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

.custom-border {
  border: 3px solid #A6147D;
}

</style>