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

<template>
  <div class="flex flex-column w-full">

    <div class="relative w-full shadow-xl rounded-2xl">

      <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
           :style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">

        <div>
          <div>

            <!--Profile and info-->
            <div class="absolute">
              <div>
                <img
                    class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
                    :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
                    alt="Profile Picture"
                    :style="{ borderColor: brandingStore.colors.secondary, height: '190px'}"
                />
              </div>
              <div class="ml-64 text-white w-25 min-w-60">
                <p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
                <p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
                <div class="text-xs">
                  105 Followers - {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
                </div>
              </div>
            </div>

            <!--  Actions - follow register-->
            <div class="flex flex-col items-center justify-center w-full min-h-24">
              <!-- Social Media Icons -->
              <div class="flex flex-row space-x-6 justify-center">
                <a
                    v-for="socialNetwork in GetSocialsUrls()"
                    :href="socialNetwork.url"
                    target="_blank"
                    class="text-white text-md 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-6 h-6 mt-0.5"
                       alt="Tiktok">
                  <img v-if="socialNetwork.icon.includes('websiteIcon')"
                       :src="socialNetwork.icon"
                       class="w-6 h-6 mt-0.5"
                       alt="Website">
                </a>
              </div>
              <!-- Follow and Subscribe Buttons -->
              <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
                <subscribe-button></subscribe-button>
              </div>
            </div>
          </div>

          <div class="absolute bottom-6 right-8 z-20 shadow-2xl rounded-md text-white w-64 h-28 flex justify-center align-center"
               :style="{ backgroundColor: brandingStore.colors.secondary}">
           
<!--            <donation-button-banner               -->
<!--                :creator-id="creatorId"-->
<!--                :creator-name="creatorName"-->
<!--                :on-success-url="successUrl"-->
<!--                :on-cancelled-url="cancelledUrl"></donation-button-banner>-->
          </div>
       


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

    <div class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
         :style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
      <div class="flex justify-evenly mt-3 w-full">
        <RouterLink class="nav-button"
                    :to="`/@${brandingStore.value.name}`">
          Présentation
        </RouterLink>
        <RouterLink class="nav-button text-white hover:bg-gray-700"
                    :to="`/@${brandingStore.value.name}/content`">
          Exclusivité
        </RouterLink>
      </div>
    </div>

  </div>

</template>

<style scoped>
.nav-button {
  @apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4
}

.nav-button:hover {
  @apply bg-purple-800;
}
</style>

<script setup>
import {ref, onMounted} from 'vue';
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import DonationButton from "@/views/creators/DonationButton.vue";

const brandingStore = useBrandingStore()

function GetSocialsUrls() {

  const socials = [];

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

  return socials;
}

// Calculer si l'utilisateur est abonné
const isSticky = ref(false);
const mainContainer = ref(null);

onMounted(() => {
  const observer = new IntersectionObserver(
      ([entry]) => {
        isSticky.value = !entry.isIntersecting;
      },
      {threshold: 0}
  );

  if (mainContainer.value) {
    observer.observe(mainContainer.value);
  }
});
</script>