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>