jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update explorer.vue

Browse Source
This commit is contained in:
PascalMarchesseault
2024-08-10 02:33:46 -04:00
parent 70e134a79f
commit 91b470793f
3 changed files with 152 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/views/explorer/explorer.vue
View File

@@ -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('');
@@ -51,7 +53,7 @@ onMounted(() => {
});
</script>
<template>
<template>
<div class="container mx-auto py-4">
<!-- Section Most Viewed -->
@@ -59,48 +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">
<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>
<ExplorerCard v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRow)" :key="video.id" :video="video" />
</div>
</div>
<div class="flex flex-col justify-center px-2">
<v-btn @click="previousRow(currentRangeLiked)" :disabled="currentRangeLiked === 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(currentRangeLiked, mostLikedVideos)" :disabled="currentRangeLiked + videosPerRow >= mostLikedVideos.length">
<v-btn @click="nextRow(currentRangeViewed, mostViewedVideos)" :disabled="currentRangeViewed + videosPerRow >= mostViewedVideos.length">
<v-icon>mdi-arrow-down-circle-outline</v-icon>
</v-btn>
</div>
@@ -109,56 +77,7 @@ onMounted(() => {
<!-- 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>
<!-- Repeat similar blocks for Most Liked, Most Bought, Most Shared -->
</div>
</template>