Model box card component

3 files changed, 73 insertions, 2 deletions

diff --git a/components/ModelBoxCard.vue b/components/ModelBoxCard.vue
new file mode 100644
index 0000000..6ac9f43
--- /dev/null
+++ b/components/ModelBoxCard.vue
@@ -0,0 +1,62 @@
+<template lang="pug">
+  .model.shadow-sm.rounded-lg.bg-white.p-4.w-full.h-80.duration-300(
+    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"
+        )
+
+    .space-y-3.mt-5
+      h1.truncate.text-xl.font-medium 
+        a(:href="'/models/'+model.id" class="hover:underline") {{ model.name }}
+      div
+        .mr-3.float-left
+          user-avatar(:data="model.author")
+        p.leading-8
+          a.text-green-800(class="hover:text-green-700" :href="'/users/'+model.author.username")
+            | @
+            span.underline {{ model.author.username }}
+
+</template>
+
+<script>
+import UserAvatar from "@/components/UserAvatar.vue";
+
+export default {
+  name: "ModelBoxCard",
+  props: ["model"],
+  components: {
+    "user-avatar": UserAvatar,
+  },
+  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;
+  },
+};
+</script>
diff --git a/components/ModelLoading.vue b/components/ModelLoading.vue
index 5db1c51..3ce43e7 100644
--- a/components/ModelLoading.vue
+++ b/components/ModelLoading.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .grid.grid-cols-4.gap-4
-    .model.shadow-xlg.rounded-lg.bg-white.p-4.w-full.h-80.animate-pulse
+    .model.shadow-xl.rounded-lg.bg-white.p-4.w-full.h-80.animate-pulse
       .image.bg-green-100.rounded-xl.w-full.h-48
       .space-y-3.mt-5
         .grid.grid-cols-3.gap-4
diff --git a/pages/index.vue b/pages/index.vue
index 2c84032..cecc169 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,11 +1,18 @@
 <template lang="pug">
   .mx-auto.max-w-7xl.py-6(class="sm:px-6 lg:px-8")
     model-loading(v-if="isLoading")
-
+    section(v-else)
+      .grid.grid-cols-4.gap-4
+        model-box-card(
+          v-for="model in models"
+          :key="model.id"
+          :model="model"
+        )
 </template>
 
 <script>
 import ModelLoading from "@/components/ModelLoading.vue";
+import ModelBoxCard from "@/components/ModelBoxCard.vue";
 
 import { mapGetters } from "vuex";
 
@@ -17,10 +24,12 @@ export default {
   },
   components: {
     "model-loading": ModelLoading,
+    "model-box-card": ModelBoxCard,
   },
   computed: {
     ...mapGetters(["isLoading"]),
     ...mapGetters("auth", ["isLogged"]),
+    ...mapGetters("models", ["models"]),
   },
   created() {
     this.$store.dispatch("models/getModels");