Use preview-image for cover

1 files changed, 7 insertions, 23 deletions

diff --git a/components/ModelBoxCard.vue b/components/ModelBoxCard.vue
index 6ac9f43..a6085b7 100644
--- a/components/ModelBoxCard.vue
+++ b/components/ModelBoxCard.vue
@@ -3,10 +3,11 @@
     class="hover:ease-out hover:shadow-md"
   )
     a(:href="'/models/'+model.id")
-      .image.bg-gray-900.rounded-xl.w-full.h-48
-        img(
-          v-if="coverImage >= 0"
-          :src="baseAPI + '' + model.uploads[coverImage].filepath"
+      .image.bg-gray-900.rounded-xl.w-full.h-48.overflow-hidden
+        file-preview(
+          :path="model.uploads[0].filepath" 
+          bg="#111827"
+          v-if="model.uploads"
         )
 
     .space-y-3.mt-5
@@ -24,38 +25,21 @@
 
 <script>
 import UserAvatar from "@/components/UserAvatar.vue";
+import FilePreview from "@/components/FilePreview.vue";
 
 export default {
   name: "ModelBoxCard",
   props: ["model"],
   components: {
     "user-avatar": UserAvatar,
+    "file-preview": FilePreview,
   },
   data() {
     return {
-      coverImage: -1,
       baseAPI: "",
     };
   },
-  methods: {
-    imageIndex(uploads) {
-      if (!uploads) return -1;
-
-      for (const i in uploads) {
-        if (
-          uploads[i].filepath.indexOf(".png") ||
-          uploads[i].filepath.indexOf(".jpg") ||
-          uploads[i].filepath.indexOf(".jpeg") ||
-          uploads[i].filepath.indexOf(".webp")
-        )
-          return i;
-      }
-
-      return -1;
-    },
-  },
   created() {
-    this.coverImage = this.imageIndex(this.model.uploads);
     this.baseAPI = this.$config.api;
   },
 };