Update explorer.vue

src/views/explorer/ExplorerCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out py4">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-lg font-bold p-3">{{ video.title }}</h3>
+      <v-btn icon class="ml-2" variant="plain">
+        <v-icon>mdi-dots-vertical</v-icon>
+      </v-btn>
+    </div>
+    <img :src="video.thumbnail" alt="video thumbnail" class="w-full ">
+    <div class="p-3">
+      <p class="text-gray-600 mb-4">{{ video.description }}</p>
+      <div class="flex items-center">
+        <img :src="video.profileImage" alt="profile image" class="w-10 h-10 rounded-full">
+        <div class="ml-4">
+          <h4 class="text-md font-bold">{{ video.name }}</h4>
+          <div class="text-gray-600 text-sm">
+            <span>{{ video.vues }} vues</span> -
+            <span>{{ video.timeAgo }} ago</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  video: {
+    type: Object,
+    required: true
+  }
+});
+</script>

src/views/explorer/explorer.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import { onMounted } from 'vue';
 import videosData from './videos.json';
+import ExplorerCard from '@/views/explorer/ExplorerCard.vue'; 
 
 // Data
 const mostLikedVideos = videosData.mostLikedVideos;
@@ -13,6 +14,7 @@ const mostViewedVideos = videosData.mostViewedVideos;
 const currentRangeLiked = ref(0);
 const currentRangeBought = ref(0);
 const currentRangeShared = ref(0);
+const currentRangeViewed = ref(0);
 const videosPerRow = 4;
 const animationDirection = ref('');
 
@@ -59,21 +61,14 @@ onMounted(() => {
     <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">
+          <ExplorerCard v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRow)" :key="video.id" :video="video" />
-            <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-btn @click="previousRow(currentRangeViewed)" :disabled="currentRangeViewed === 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-btn @click="nextRow(currentRangeViewed, mostViewedVideos)" :disabled="currentRangeViewed + videosPerRow >= mostViewedVideos.length">
           <v-icon>mdi-arrow-down-circle-outline</v-icon>
         </v-btn>
       </div>
@@ -82,83 +77,7 @@ onMounted(() => {
     <!-- Horizontal Line -->
     <hr class="my-3">
 
-    <!-- Section Most Liked -->
+    <!-- Repeat similar blocks for Most Liked, Most Bought, Most Shared -->
-    <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>
 

src/views/explorer/videos.json

@@ -1,298 +1,170 @@
 {
   "mostLikedVideos": [
     {
-      "id": 1,
+      "id": 37,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Liked Video 1",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Liked Video 1"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 2,
+      "id": 38,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Liked Video 2",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Liked Video 2"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 3,
+      "id": 39,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Liked Video 3",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Liked Video 3"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 4,
+      "id": 40,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Liked Video 4",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Liked Video 4"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
-    },
+      "name": "John Doe",
-    {
+      "vues": 1200,
-      "id": 5,
+      "timeAgo": "2 hours"
-      "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,
+      "id": 41,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Bought Video 1",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Bought Video 1"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 8,
+      "id": 42,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Bought Video 2",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Bought Video 2"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 9,
+      "id": 43,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Bought Video 3",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Bought Video 3"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 10,
+      "id": 44,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Bought Video 4",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Bought Video 4"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
-    },
+      "name": "John Doe",
-    {
+      "vues": 1200,
-      "id": 11,
+      "timeAgo": "2 hours"
-      "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,
+      "id": 45,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Shared Video 1",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Shared Video 1"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 14,
+      "id": 46,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Shared Video 2",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Shared Video 2"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 15,
+      "id": 47,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Shared Video 3",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Shared Video 3"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 16,
+      "id": 48,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Shared Video 4",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Shared Video 4"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
-    },
+      "name": "John Doe",
-    {
+      "vues": 1200,
-      "id": 17,
+      "timeAgo": "2 hours"
-      "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,
+      "id": 49,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Viewed Video 1",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Viewed Video 1"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 38,
+      "id": 50,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Viewed Video 2",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Viewed Video 2"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 39,
+      "id": 51,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Viewed Video 3",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Viewed Video 3"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "John Doe",
+      "vues": 1200,
+      "timeAgo": "2 hours"
     },
     {
-      "id": 40,
+      "id": 52,
+      "title": "Amazing Video Title",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "title": "Most Viewed Video 4",
+      "description": "This is a brief description of the video content.",
-      "description": "This is a short description of Most Viewed Video 4"
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
-    },
+      "name": "John Doe",
-    {
+      "vues": 1200,
-      "id": 41,
+      "timeAgo": "2 hours"
-      "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"
     }
   ]
 }