Explorer start

src/views/explorer/ExplorerCard.vue

@@ -1,21 +1,20 @@
 <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>
+      <h3 class="text-lg font-bold p-3">{{ content.title }}</h3>
     </div>
-    <img :src="video.thumbnail" alt="video thumbnail" class="w-full ">
+    <img v-if="content.urls !== null" :src="content.urls" alt="thumbnail" class="w-full ">
     <div class="p-3">
-      <p class="text-gray-600 mb-4">{{ video.description }}</p>
+      <p class="text-gray-600 mb-4">{{ content.description }}</p>
       <div class="flex items-center">
-        <img :src="video.profileImage" alt="profile image" class="w-10 h-10 rounded-full">
+        <router-link class="capitalize px-2" :to="`/@${props.content.createdByName}`">
+          <img :src="content.createdByPortraitUrl" alt="profile image" class="w-10 h-10 rounded-full">
+        </router-link>
         <div class="ml-4">
-          <h4 class="text-md font-bold">{{ video.name }}</h4>
+          <h4 class="text-md font-bold">{{ content.name }}</h4>
           <div class="text-gray-600 text-sm">
-            <span>{{ video.vues }} vues</span> -
-            <span>{{ video.timeAgo }} ago</span>            
+            <span>{{ content.reactions.length }} reactions</span> -
+            <span>{{ time_ago(content.createdAt) }}</span>            
           </div>
         </div>
       </div>
@@ -26,8 +25,10 @@
 
 
 <script setup>
-defineProps({
-  video: {
+import {time_ago} from "@/internal_time_ago.js";
+
+const props = defineProps({
+  content: {
     type: Object,
     required: true
   }