Ajout dans la page de description.

src/views/creators/CreatorPresentation.vue

@@ -30,7 +30,8 @@
         </div>
       </div>
       <div class="min-w-[875px]"></div>
-      <div class="bg-fuchsia-800 flex-grow">
+      <div class="max-w-80">
+<rewards :creator="creator"></rewards>
       </div>
     </div>
   </div>
@@ -42,6 +43,8 @@ import {useRoute} from 'vue-router';
 import {useClient} from "@/plugins/api.js";
 import CreatorBanner from "@/views/creators/CreatorBanner.vue";
 import Creatornewssummary from "@/views/creators/banner/Creatornewssummary.vue";
+import Rewards from "@/views/creators/banner/Rewards.vue";
+
 
 const creator = ref(null)
 const loading = ref(true)

src/views/creators/banner/Creatornewssummary.vue

@@ -1,8 +1,20 @@
 <template>
-  <div>  
+  <div class="overflow-hidden relative">
-    <div class="text-center text-white rounded-t-lg text-xl" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Actualité</div>
+
-    <div class="flex flex-column">
+    <div class="flex justify-center mt-2 py-2">
-      <div v-for="(item, index) in visibleCards" :key="index" class="my-1 text-white" :style="{ backgroundColor: creator.colors.bannerTop }">
+      <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>     
+    </div>
+    
+    <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>
@@ -27,21 +39,43 @@
             <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-btn height="42" @click="scrollUp">
+      <v-btn variant="text" class="text-white" height="42" @click="scrollDown">
-          <v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
-        </v-btn>
-        <v-btn height="42" @click="scrollDown">
         <v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
       </v-btn>
     </div>
   </div>
-  </div>
 </template>
 
+
+
+<style scoped>
+.card-enter-active, .card-leave-active {
+  transition: all 0.5s ease;
+}
+.card-enter-from, .card-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+.card-leave-from, .card-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Ajout de overflow-y pour rendre la publication suivante partiellement visible */
+.max-h-[1000px] {
+  overflow-y: hidden;
+}
+</style>
+
+
 <script setup>
 import { ref, computed, defineProps } from 'vue';
+
 const props = defineProps({
   creator: {
     type: Object,
@@ -54,23 +88,32 @@ const actualites = ref([
   { 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
+
 const endIndex = computed(() => startIndex.value + cardsPerPage);
 const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
 
 function scrollDown() {
   if (endIndex.value < actualites.value.length) {
-    startIndex.value += 2;
+    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 -= 2;
+    startIndex.value -= 1; // Défiler d'une carte à la fois
+    scrollPosition.value -= cardHeight; // Diminuer la position de défilement
   }
 }
 </script>
+
+

src/views/creators/banner/Rewards.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="overflow-hidden relative">
+
+    <div class="flex justify-center mt-2 py-2">
+      <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>
+    </div>
+
+    <div class="text-center text-white rounded-t-lg py-1 mb-1" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Récompenses</div>
+
+    <!-- Container that holds all the posts and allows dynamic scrolling -->
+    <div class="relative h-[1000px] 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-center items-center border-b-2 border-white p-3 mx-2">
+            <div class="text-xl align-center" style="letter-spacing: 4px">{{ item.title }}</div>
+        
+          </div>
+
+          <div class="p-3">
+        
+            <p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
+
+            <div v-if="item.amount" class="text-right text-lg text-green-500">
+              {{ item.amount }}$
+            </div>
+            <div v-if="item.quantity" class="text-right text-sm text-gray-400">
+              Quantité: {{ item.quantity }}
+            </div>           
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation Buttons directly below the content -->
+    <div class="flex justify-center mt-2 space-x-2">
+      <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([
+  {title: 'Hoodie', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', amount: 50, quantity: 5, date: '2024-09-19' },
+  {title: 'Small Talk', description: 'Ceci est la description du contenu.', amount: null, quantity: null, date: '2024-09-18' },
+  {title: 'Les vrais choses', 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.', amount: 100, quantity: 10, date: '2024-09-17' },
+  {title: 'On va changer le monde', description: 'Deuxième contenu avec description.', amount: null, quantity: null, date: '2024-09-16' },
+  {title: 'Séance photo', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', amount: 150, quantity: 20, 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
+
+const endIndex = computed(() => startIndex.value + cardsPerPage);
+const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
+
+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
+  }
+}
+</script>