Start working on the content explorer!

src/views/explorer/explorer.vue

@@ -0,0 +1,169 @@
+<script setup>
+import { ref } from 'vue';
+import { onMounted } from 'vue';
+import videosData from './videos.json';
+
+// Data
+const mostLikedVideos = videosData.mostLikedVideos;
+const mostBoughtVideos = videosData.mostBoughtVideos;
+const mostSharedVideos = videosData.mostSharedVideos;
+const mostViewedVideos = videosData.mostViewedVideos;
+
+// State to control the current range of videos displayed
+const currentRangeLiked = ref(0);
+const currentRangeBought = ref(0);
+const currentRangeShared = ref(0);
+const videosPerRow = 4;
+const animationDirection = ref('');
+
+// Function to move to the next set of videos
+const nextRow = (currentRange, videosList) => {
+  if (currentRange.value + videosPerRow < videosList.length) {
+    animationDirection.value = 'down';
+    setTimeout(() => {
+      currentRange.value += videosPerRow;
+    }, 300);
+  }
+};
+
+// Function to move to the previous set of videos
+const previousRow = (currentRange) => {
+  if (currentRange.value - videosPerRow >= 0) {
+    animationDirection.value = 'up';
+    setTimeout(() => {
+      currentRange.value -= videosPerRow;
+    }, 300);
+  }
+};
+
+// Function to animate the transition
+const animationClass = () => {
+  if (animationDirection.value === 'down') {
+    return 'transition-transform transform translate-y-full opacity-0';
+  } else if (animationDirection.value === 'up') {
+    return 'transition-transform transform -translate-y-full opacity-0';
+  }
+  return '';
+};
+
+onMounted(() => {
+  animationDirection.value = '';
+});
+</script>
+
+<template>  
+  <div class="container mx-auto py-4">
+
+    <!-- Section Most Viewed -->
+    <h2 class="text-2xl font-bold mb-2">Most Viewed</h2>
+    <div class="flex flex-row">
+      <div class="relative overflow-hidden">
+        <div :class="`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8 ${animationClass()}`">
+          <div v-for="(video, index) in mostViewedVideos.slice(currentRangeBought, currentRangeBought + videosPerRow)" :key="video.id" class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
+            <img :src="video.thumbnail" alt="video thumbnail" class="w-full">
+            <div class="p-4">
+              <h3 class="text-lg font-bold">{{ video.title }}</h3>
+              <p class="text-gray-600">{{ video.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="flex flex-col justify-center px-2">
+        <v-btn @click="previousRow(currentRangeBought)" :disabled="currentRangeBought === 0" class="mb-2">
+          <v-icon>mdi-arrow-up-circle-outline</v-icon>
+        </v-btn>
+        <v-btn @click="nextRow(currentRangeBought, mostBoughtVideos)" :disabled="currentRangeBought + videosPerRow >= mostBoughtVideos.length">
+          <v-icon>mdi-arrow-down-circle-outline</v-icon>
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Horizontal Line -->
+    <hr class="my-3">
+    
+    <!-- Section Most Liked -->
+    <h2 class="text-2xl font-bold mb-2">Most Liked</h2>
+    <div class="flex flex-row">
+      <div class="relative overflow-hidden">
+        <div :class="`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8 ${animationClass()}`">
+          <div v-for="(video, index) in mostLikedVideos.slice(currentRangeLiked, currentRangeLiked + videosPerRow)" :key="video.id" class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
+            <img :src="video.thumbnail" alt="video thumbnail" class="w-full">
+            <div class="p-4">
+              <h3 class="text-lg font-bold">{{ video.title }}</h3>
+              <p class="text-gray-600">{{ video.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col justify-center px-2">
+        <v-btn @click="previousRow(currentRangeLiked)" :disabled="currentRangeLiked === 0" class="mb-2">
+          <v-icon>mdi-arrow-up-circle-outline</v-icon>
+        </v-btn>
+        <v-btn @click="nextRow(currentRangeLiked, mostLikedVideos)" :disabled="currentRangeLiked + videosPerRow >= mostLikedVideos.length">
+          <v-icon>mdi-arrow-down-circle-outline</v-icon>
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Horizontal Line -->
+    <hr class="my-3">
+
+    <!-- Section Most Bought -->
+    <h2 class="text-2xl font-bold mb-2">Most Bought</h2>
+    <div class="flex flex-row">
+      <div class="relative overflow-hidden">
+        <div :class="`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8 ${animationClass()}`">
+          <div v-for="(video, index) in mostBoughtVideos.slice(currentRangeBought, currentRangeBought + videosPerRow)" :key="video.id" class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
+            <img :src="video.thumbnail" alt="video thumbnail" class="w-full">
+            <div class="p-4">
+              <h3 class="text-lg font-bold">{{ video.title }}</h3>
+              <p class="text-gray-600">{{ video.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col justify-center px-2">
+        <v-btn @click="previousRow(currentRangeBought)" :disabled="currentRangeBought === 0" class="mb-2">
+          <v-icon>mdi-arrow-up-circle-outline</v-icon>
+        </v-btn>
+        <v-btn @click="nextRow(currentRangeBought, mostBoughtVideos)" :disabled="currentRangeBought + videosPerRow >= mostBoughtVideos.length">
+          <v-icon>mdi-arrow-down-circle-outline</v-icon>
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Horizontal Line -->
+    <hr class="my-3">
+
+    <!-- Section Most Shared -->
+    <h2 class="text-2xl font-bold mb-2">Most Shared</h2>
+    <div class="flex flex-row">
+      <div class="relative overflow-hidden">
+        <div :class="`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8 ${animationClass()}`">
+          <div v-for="(video, index) in mostSharedVideos.slice(currentRangeShared, currentRangeShared + videosPerRow)" :key="video.id" class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
+            <img :src="video.thumbnail" alt="video thumbnail" class="w-full">
+            <div class="p-4">
+              <h3 class="text-lg font-bold">{{ video.title }}</h3>
+              <p class="text-gray-600">{{ video.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col justify-center px-2">
+        <v-btn @click="previousRow(currentRangeShared)" :disabled="currentRangeShared === 0" class="mb-2">
+          <v-icon>mdi-arrow-up-circle-outline</v-icon>
+        </v-btn>
+        <v-btn @click="nextRow(currentRangeShared, mostSharedVideos)" :disabled="currentRangeShared + videosPerRow >= mostSharedVideos.length">
+          <v-icon>mdi-arrow-down-circle-outline</v-icon>
+        </v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  max-width: 1200px;
+}
+</style>