39 lines
1.0 KiB
Vue
39 lines
1.0 KiB
Vue
<template>
|
|
<v-container class="content-container mx-auto">
|
|
<v-card v-for="item in products" class="mb-3" :to="item._path">
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" md="4">
|
|
<v-img :src="item.thumbnail" :aspect-ratio="16/9" class="rounded-md" cover />
|
|
</v-col>
|
|
<v-col cols="12" md="8" class="flex flex-col">
|
|
<h2 class="text-xl">{{ item.title }}</h2>
|
|
<span>{{ item.description }}</span>
|
|
<v-chip
|
|
v-if="item?.archived"
|
|
label
|
|
prepend-icon="mdi-archive"
|
|
variant="text"
|
|
color="warning"
|
|
size="small"
|
|
class="mx-[-6px]"
|
|
>
|
|
Archived
|
|
</v-chip>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: products } = await useAsyncData("products", () => queryContent("/products").find())
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content-container {
|
|
max-width: 65ch !important;
|
|
}
|
|
</style>
|