Add ExclusiveContentcontainer with route.

src/views/creators/CreatorNewsSummary.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="overflow-hidden relative" @wheel="handleScroll">
+    <div class="text-center text-white rounded-t-lg mb-1 py-1"
+         :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">
+      Actualité
+    </div>
+
+    <!-- Container that holds all the posts and allows dynamic scrolling -->
+    <div class="relative max-h-[1000px] overflow-hidden">
+      <div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
+        <div v-for="(item, index) in actualites" :key="index" class="my-1 text-white"
+             :style="{ backgroundColor: creator.colors.bannerTop }">
+          <div class="flex justify-between items-center border-b-2 border-white p-3 mx-2">
+            <p v-if="item.type === 'nouvelle'" class="text-xl" :style="{ letterSpacing: '8px' }">Nouvelle</p>
+            <p v-if="item.type === 'contenu'" class="text-xl" :style="{ letterSpacing: '8px' }">Contenu</p>
+            <p class="text-xs">{{ item.date }}</p>
+          </div>
+
+          <div class="p-3">
+            <div class="text-lg" style="letter-spacing: 2px">{{ item.title }}</div>
+            <p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
+
+            <div v-if="item.rating" class="stars flex justify-end">
+              {{ item.rating }} ★
+            </div>
+
+            <img v-if="item.photo" :src="item.photo" class="w-full h-auto my-2"/>
+
+            <div class="flex justify-evenly">
+              <v-btn icon variant="plain">
+                <v-icon>mdi-thumb-up</v-icon>
+              </v-btn>
+              <v-btn icon variant="plain">
+                <v-icon>mdi-comment-outline</v-icon>
+              </v-btn>
+              <v-btn icon variant="plain">
+                <v-icon>mdi-gift-outline</v-icon>
+              </v-btn>
+            </div>
+            <video v-if="item.video" controls :src="item.video" class="w-full h-auto my-2"></video>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation Buttons directly below the content -->
+    <div class="flex justify-center mt-2 space-x-2" v-if="showNavigationButtons">
+      <v-btn variant="text" class="text-white" height="42" @click="scrollUp">
+        <v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
+      </v-btn>
+      <v-btn variant="text" class="text-white" height="42" @click="scrollDown">
+        <v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineProps } from 'vue';
+
+const props = defineProps({
+  creator: {
+    type: Object,
+    required: true,
+  },
+});
+
+const actualites = ref([
+  {
+    type: 'nouvelle',
+    title: 'La visite du studio',
+    description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
+    photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
+    video: null,
+    rating: null,
+    date: '2024-09-19'
+  },
+  {
+    type: 'contenu',
+    title: 'Éditer comme un pro!',
+    description: 'Ceci est la description du contenu.',
+    photo: null,
+    video: null,
+    rating: 4.5,
+    date: '2024-09-18'
+  },
+  {
+    type: 'nouvelle',
+    title: 'Le studio',
+    description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.',
+    photo: null,
+    video: null,
+    rating: null,
+    date: '2024-09-17'
+  },
+  {
+    type: 'contenu',
+    title: 'Contenu 2',
+    description: 'Deuxième contenu avec description.',
+    photo: null,
+    video: null,
+    rating: 5.0,
+    date: '2024-09-16'
+  },
+  {
+    type: 'nouvelle',
+    title: 'La 2e visite du studio',
+    description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
+    photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
+    video: null,
+    rating: null,
+    date: '2024-09-19'
+  },
+]);
+
+const startIndex = ref(0);
+const cardsPerPage = 3;
+
+// Gestion de la position du scroll
+const scrollPosition = ref(0);
+const cardHeight = 250; // Hauteur approximative d'une carte en pixels
+
+// Calculer l'index final
+const endIndex = computed(() => startIndex.value + cardsPerPage);
+const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
+
+// Calculer si les boutons doivent être affichés
+const showNavigationButtons = computed(() => {
+  const totalHeight = actualites.value.length * cardHeight;
+  const containerHeight = cardsPerPage * cardHeight;
+  return totalHeight > containerHeight; // Afficher les boutons seulement si le contenu dépasse la hauteur du conteneur
+});
+
+function scrollDown() {
+  if (endIndex.value < actualites.value.length) {
+    startIndex.value += 1; // Défiler d'une carte à la fois
+    scrollPosition.value += cardHeight; // Augmenter la position de défilement
+  }
+}
+
+function scrollUp() {
+  if (startIndex.value > 0) {
+    startIndex.value -= 1; // Défiler d'une carte à la fois
+    scrollPosition.value -= cardHeight; // Diminuer la position de défilement
+  }
+}
+
+// Handle scroll wheel event to scroll up or down
+function handleScroll(event) {
+  event.preventDefault(); // Empêche le défilement de la page
+  if (event.deltaY < 0) {
+    scrollUp(); // Défilement vers le haut
+  } else if (event.deltaY > 0) {
+    scrollDown(); // Défilement vers le bas
+  }
+}
+</script>