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

<script setup>
import {useClient} from '@/plugins/api.js';
import {useBrandingStore} from '@/stores/brandingStore.js';
import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
import {onBeforeUnmount, onMounted, ref} from 'vue';
import CreatorLogo from "@/views/creators/CreatorLogo.vue";
import NameTitle from "@/views/creators/NameTitle.vue";

const brandingStore = useBrandingStore();
const isMobile = ref(false);
const creator = ref(null);
const baseURL = window.location.origin;
const creatorName = window.location.pathname.split('/@').pop();

function updateIsMobile() {
  isMobile.value = window.innerWidth <= 640;
}

// Récupération des URLs des réseaux sociaux
function GetSocialsUrls() {
  const socials = [];
  const brandingSocials = brandingStore.value.socials;

  if (brandingSocials?.facebookUrl) {
    socials.push({
      icon: 'mdi-facebook',
      url: brandingSocials.facebookUrl,
    });
  }

  if (brandingSocials?.instagramUrl) {
    socials.push({
      icon: 'mdi-instagram',
      url: brandingSocials.instagramUrl,
    });
  }

  if (brandingSocials?.xUrl) {
    socials.push({
      icon: 'mdi-twitter',
      url: brandingSocials.xUrl,
    });
  }

  if (brandingSocials?.linkedInUrl) {
    socials.push({
      icon: 'mdi-linkedin',
      url: brandingSocials.linkedInUrl,
    });
  }

  if (brandingSocials?.tikTokUrl) {
    socials.push({
      icon: '/images/socials/tiktok-white.png',
      url: brandingSocials.tikTokUrl,
    });
  }

  if (brandingSocials?.youtubeUrl) {
    socials.push({
      icon: 'mdi-youtube',
      url: brandingSocials.youtubeUrl,
    });
  }

  if (brandingSocials?.redditUrl) {
    socials.push({
      icon: 'mdi-reddit',
      url: brandingSocials.redditUrl,
    });
  }

  if (brandingSocials?.websiteUrl) {
    socials.push({
      icon: 'mdi-web',
      url: brandingSocials.websiteUrl,
    });
  }

  return socials;
}

const isSticky = ref(false);
const mainContainer = ref(null);

onMounted(async () => {
  updateIsMobile();
  window.addEventListener('resize', updateIsMobile);

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

  if (mainContainer.value) {
    observer.observe(mainContainer.value);
  }

  const client = useClient();

  try {
    const creatorResponse = await client.get(`/api/creators/@${creatorName}`);
    creator.value = creatorResponse.data;
  } catch (error) {
    creator.value = undefined;
  }
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateIsMobile);
});
</script>

<template>
  <div class="flex flex-column w-full">
    <!-- Container principal avec le profil -->
    <div class="relative w-full shadow-xl rounded-2xl">
      <div class="rounded-b-2xl shadow-2xl bg-hPrimary"
           :style="{
            boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
            }">

        <div class="flex flex-row p-2">
          <!-- Profile et Info -->

          <div>
            <creator-logo/>
          </div>

          <div class="flex items-center">
            <name-title></name-title>
          </div>


          <!-- Actions - Follow et Register -->
          <!--          <div class="flex flex-col items-center justify-center w-full">-->
          <!--            <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">-->
          <!--              &lt;!&ndash;<subscribe-button></subscribe-button>&ndash;&gt;-->
          <!--            </div>-->
          <!--          </div>-->
        </div>

        <!-- Bouton Support -->
        <div
            v-show="brandingStore.value.acceptDonation"
            class="z-20 shadow-2xl rounded-md bg-hSecondary text-hOnSecondary flex justify-center items-center z-50"
            :class="{
            'absolute bottom-6 right-8 w-64 h-28 ': !isMobile,
            'fixed bottom-0 left-0 right-0 w-full h-16': isMobile,
          }"
        >
          <donation-button-banner
              v-if="creator"
              :creator-id="creator.id"
              :creator-name="creator.name"
              :on-success-url="baseURL + '/paymentcompleted/' + creator.id"
              :on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
          ></donation-button-banner>
        </div>
      </div>
    </div>

    <!-- Section pour les icônes de réseaux sociaux -->
    <div
        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center bg-hSecondary"
        :style="{
        boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
      }"
    >
      <div class="flex justify-evenly mt-3 w-full">
        <div class="flex flex-row space-x-6 justify-center">
          <a
              v-for="socialNetwork in GetSocialsUrls()"
              :key="socialNetwork.url"
              :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-else
                :src="socialNetwork.icon"
                class="w-6 h-6 mt-0.5"
                :alt="socialNetwork.url"
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>