social-media/src/views/creators/CreatorBanner.vue

<template>
  <!--  Bannière-->
  <div class="relative bottom-4  z-20 m">
    <div class="relative flex flex-col">
      <!-- Social Network-->
      <div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
           :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
        <div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
          <a
              v-for="socialNetwork in GetSocialsUrls()"
              :href="socialNetwork.url"
              target="_blank"
              class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
            <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
            <img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9" alt="Tiktok">
            <img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
                 alt="Website">
          </a>
        </div>
      </div>
    </div>

    <!--Banner & user info-->
    <div class="relative">
      <!--Banner-->
      <div>
        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
             :src="creator.images.banner"
             alt="Profile Banner" style="max-height: 425px">
      </div>
    </div>
  </div>

  <!-- Actions Button & image profile -->
  <div class="relative bottom-4 w-full">
    <div class="bg-gray-800 py-4 relative shadow-lg min-h-24"
         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
      <div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
        <!-- Profile Image Wrapper -->
        <div class="relative flex justify-center lg:w-auto lg:justify-start">
          
          <!-- Profile Image -->
          <div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
            <img
                class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
                :src="creator.images.logo"
                alt="Profile Picture"
                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
            />
          </div>
        </div>

        <!-- User Info -->
        <div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
          <div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24 text-white cap ">
            <p class="capitalize ">{{ creator.name }} </p>
            <div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
          </div>
        </div>

        <div class="px-6 mt-2">
          <subscribe-button :creator="creator"></subscribe-button>
        </div>

        <donation-button :creator="creator" iconColorClass="text-white"></donation-button>


        <div class="flex flex-row align-center">
       
         
        </div>
        <!-- Buttons -->
        <div class="flex flex-wrap items-center  mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
          <publish-content-button :creator="creator"></publish-content-button>
          <div class="text-white text-2xl">{{ creator.about.title }}</div>
          <creator-about :creator="creator"></creator-about>     
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/donation-button.vue";

const props = defineProps({
  creator: {type: Object, required: true},
});

function GetSocialsUrls() {

  const socials = [];

  if (props.creator.socials.facebookUrl !== null) {
    socials.push({
      icon: "mdi-facebook",
      url: props.creator.socials.facebookUrl
    })
  }
  if (props.creator.socials.instagramUrl !== null) {
    socials.push({
      icon: "mdi-instagram",
      url: props.creator.socials.instagramUrl
    })
  }
  if (props.creator.socials.xUrl !== null) {
    socials.push({
      icon: "mdi-twitter",
      url: props.creator.socials.xUrl
    })
  }
  if (props.creator.socials.linkedInUrl !== null) {
    socials.push({
      icon: 'mdi-linkedin',
      url: props.creator.socials.linkedInUrl
    })
  }
  if (props.creator.socials.tikTokUrl !== null) {
    socials.push({
      icon: '/images/socials/tiktok-white.png',
      url: props.creator.socials.tikTokUrl
    })
  }
  if (props.creator.socials.youtubeUrl !== null) {
    socials.push({
      icon: 'mdi-youtube',
      url: props.creator.socials.youtubeUrl
    })
  }
  if (props.creator.socials.redditUrl !== null) {
    socials.push({
      icon: 'mdi-reddit',
      url: props.creator.socials.redditUrl
    })
  }
  if (props.creator.socials.websiteUrl !== null) {
    socials.push({
      icon: 'mdi-web',
      url: props.creator.socials.websiteUrl
    })
  }

  return socials;
}

</script>