Start working on the content explorer!

src/router/router.js

@@ -18,6 +18,7 @@ import CreatorList from '../views/creators/CreatorList.vue'
 import CreatorPage from "@/views/creators/CreatorPage.vue";
 import ContentPage from "@/views/contents/ContentPage.vue";
 import PostContent from "@/views/contents/PostContent.vue";
+import Explorer from "@/views/explorer/explorer.vue";
 import {useAuthStore} from "@/stores/authStore.js";
 
 const routes = [
@@ -127,6 +128,12 @@ const routes = [
         component: Profile,
         meta: { requiresAuth: true }
     },
+    {
+        path: '/explorer',
+        name: 'explorer',
+        component: Explorer,
+        
+    },
 ]
 
 const router = createRouter({

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>

src/views/explorer/videos.json

@@ -0,0 +1,298 @@
+{
+  "mostLikedVideos": [
+    {
+      "id": 1,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 1",
+      "description": "This is a short description of Most Liked Video 1"
+    },
+    {
+      "id": 2,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 2",
+      "description": "This is a short description of Most Liked Video 2"
+    },
+    {
+      "id": 3,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 3",
+      "description": "This is a short description of Most Liked Video 3"
+    },
+    {
+      "id": 4,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 4",
+      "description": "This is a short description of Most Liked Video 4"
+    },
+    {
+      "id": 5,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 5",
+      "description": "This is a short description of Most Liked Video 5"
+    },
+    {
+      "id": 6,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 6",
+      "description": "This is a short description of Most Liked Video 6"
+    },
+    {
+      "id": 19,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 7",
+      "description": "This is a short description of Most Liked Video 7"
+    },
+    {
+      "id": 20,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 8",
+      "description": "This is a short description of Most Liked Video 8"
+    },
+    {
+      "id": 21,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 9",
+      "description": "This is a short description of Most Liked Video 9"
+    },
+    {
+      "id": 22,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 10",
+      "description": "This is a short description of Most Liked Video 10"
+    },
+    {
+      "id": 23,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 11",
+      "description": "This is a short description of Most Liked Video 11"
+    },
+    {
+      "id": 24,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Liked Video 12",
+      "description": "This is a short description of Most Liked Video 12"
+    }
+  ],
+  "mostBoughtVideos": [
+    {
+      "id": 7,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 1",
+      "description": "This is a short description of Most Bought Video 1"
+    },
+    {
+      "id": 8,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 2",
+      "description": "This is a short description of Most Bought Video 2"
+    },
+    {
+      "id": 9,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 3",
+      "description": "This is a short description of Most Bought Video 3"
+    },
+    {
+      "id": 10,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 4",
+      "description": "This is a short description of Most Bought Video 4"
+    },
+    {
+      "id": 11,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 5",
+      "description": "This is a short description of Most Bought Video 5"
+    },
+    {
+      "id": 12,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 6",
+      "description": "This is a short description of Most Bought Video 6"
+    },
+    {
+      "id": 25,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 7",
+      "description": "This is a short description of Most Bought Video 7"
+    },
+    {
+      "id": 26,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 8",
+      "description": "This is a short description of Most Bought Video 8"
+    },
+    {
+      "id": 27,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 9",
+      "description": "This is a short description of Most Bought Video 9"
+    },
+    {
+      "id": 28,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 10",
+      "description": "This is a short description of Most Bought Video 10"
+    },
+    {
+      "id": 29,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 11",
+      "description": "This is a short description of Most Bought Video 11"
+    },
+    {
+      "id": 30,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Bought Video 12",
+      "description": "This is a short description of Most Bought Video 12"
+    }
+  ],
+  "mostSharedVideos": [
+    {
+      "id": 13,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 1",
+      "description": "This is a short description of Most Shared Video 1"
+    },
+    {
+      "id": 14,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 2",
+      "description": "This is a short description of Most Shared Video 2"
+    },
+    {
+      "id": 15,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 3",
+      "description": "This is a short description of Most Shared Video 3"
+    },
+    {
+      "id": 16,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 4",
+      "description": "This is a short description of Most Shared Video 4"
+    },
+    {
+      "id": 17,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 5",
+      "description": "This is a short description of Most Shared Video 5"
+    },
+    {
+      "id": 18,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 6",
+      "description": "This is a short description of Most Shared Video 6"
+    },
+    {
+      "id": 31,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 7",
+      "description": "This is a short description of Most Shared Video 7"
+    },
+    {
+      "id": 32,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 8",
+      "description": "This is a short description of Most Shared Video 8"
+    },
+    {
+      "id": 33,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 9",
+      "description": "This is a short description of Most Shared Video 9"
+    },
+    {
+      "id": 34,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 10",
+      "description": "This is a short description of Most Shared Video 10"
+    },
+    {
+      "id": 35,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 11",
+      "description": "This is a short description of Most Shared Video 11"
+    },
+    {
+      "id": 36,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Shared Video 12",
+      "description": "This is a short description of Most Shared Video 12"
+    }
+  ],
+  "mostViewedVideos": [
+    {
+      "id": 37,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 1",
+      "description": "This is a short description of Most Viewed Video 1"
+    },
+    {
+      "id": 38,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 2",
+      "description": "This is a short description of Most Viewed Video 2"
+    },
+    {
+      "id": 39,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 3",
+      "description": "This is a short description of Most Viewed Video 3"
+    },
+    {
+      "id": 40,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 4",
+      "description": "This is a short description of Most Viewed Video 4"
+    },
+    {
+      "id": 41,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 5",
+      "description": "This is a short description of Most Viewed Video 5"
+    },
+    {
+      "id": 42,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 6",
+      "description": "This is a short description of Most Viewed Video 6"
+    },
+    {
+      "id": 43,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 7",
+      "description": "This is a short description of Most Viewed Video 7"
+    },
+    {
+      "id": 44,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 8",
+      "description": "This is a short description of Most Viewed Video 8"
+    },
+    {
+      "id": 45,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 9",
+      "description": "This is a short description of Most Viewed Video 9"
+    },
+    {
+      "id": 46,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 10",
+      "description": "This is a short description of Most Viewed Video 10"
+    },
+    {
+      "id": 47,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 11",
+      "description": "This is a short description of Most Viewed Video 11"
+    },
+    {
+      "id": 48,
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "title": "Most Viewed Video 12",
+      "description": "This is a short description of Most Viewed Video 12"
+    }
+  ]
+}