Capital/pages/products/index.vue

49 lines
1.2 KiB
Vue
Raw Permalink Normal View History

2024-07-02 15:07:22 +00:00
<template>
2024-08-10 08:40:59 +00:00
<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]"
>
{{ t("productArchived") }}
2024-08-10 08:40:59 +00:00
</v-chip>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-container>
2024-07-02 15:07:22 +00:00
</template>
2024-08-10 08:40:59 +00:00
<script setup lang="ts">
2024-08-13 14:44:36 +00:00
import { getLocale } from "~/utils/locale"
2024-08-11 14:26:29 +00:00
useHead({
title: "Products",
2024-08-11 14:26:29 +00:00
})
const { t } = useI18n()
2024-08-13 14:44:36 +00:00
const { data: products } = await useAsyncData("products", () => {
return queryContent("/products").where({ _locale: getLocale() }).find()
})
2024-08-10 08:40:59 +00:00
</script>
<style scoped>
.content-container {
max-width: 65ch !important;
}
</style>