Add ExclusiveContentcontainer with route.

2024-09-20 14:31:18 -04:00
parent 8837dc5be1
commit b3fec80607
6 changed files with 269 additions and 3 deletions
--- a/src/views/creators/Rewards.vue
+++ b/src/views/creators/Rewards.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="overflow-hidden relative" @wheel="handleScroll">
+
+    <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 p-4" :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="flex flex-row justify-end space-x-2">
+              <div class="text-right text-white">{{ item.amount }}$</div>
+              <div>|</div>
+              <div v-if="item.quantity"> Quantité: {{ item.quantity }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation Buttons directly below the content -->
+    <div v-if="showNavigationButtons" 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>
+      <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: 150,
+    quantity: 1,
+    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',
+  },
+  {
+    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;
+const scrollPosition = ref(0);
+const cardHeight = 250;
+
+const endIndex = computed(() => startIndex.value + cardsPerPage);
+const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
+
+// Calculate whether navigation buttons should be shown
+const showNavigationButtons = computed(() => {
+  const totalHeight = actualites.value.length * cardHeight;
+  const containerHeight = cardsPerPage * cardHeight;
+  return totalHeight > containerHeight; // Only show buttons if content exceeds the container
+});
+
+function scrollUp() {
+  if (startIndex.value > 0) {
+    startIndex.value -= 1;
+    scrollPosition.value -= cardHeight;
+  }
+}
+
+function scrollDown() {
+  const totalHeight = actualites.value.length * cardHeight;
+  const containerHeight = cardsPerPage * cardHeight;
+
+  if (scrollPosition.value + containerHeight < totalHeight) {
+    startIndex.value += 1;
+    scrollPosition.value += cardHeight;
+  }
+}
+
+// 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>