summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/ModelBoxCard.vue62
-rw-r--r--components/ModelLoading.vue2
2 files changed, 63 insertions, 1 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