Capital/pages/products/[...slug].vue
2024-08-10 16:40:59 +08:00

76 lines
2.2 KiB
Vue

<template>
<v-container class="content-container mx-auto">
<v-card v-if="page" class="mb-5" :to="page._path">
<v-card-text>
<v-row>
<v-col cols="12" md="4">
<v-img :src="page.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">{{ page.title }}</h2>
<span>{{ page.description }}</span>
<v-chip
v-if="page?.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>
<article class="text-base prose prose-truegray xl:text-lg mx-auto">
<content-doc>
<template #empty>
<v-empty-state
icon="mdi-image-broken-variant"
text="This product has no specific describe for it, yet."
title="No Content"
class="no-content-placeholder"
>
<template #actions>
<v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
</template>
</v-empty-state>
</template>
<template #not-found>
<v-empty-state
icon="mdi-flask-empty-remove-outline"
text="We haven't this product, yet."
title="Not Found"
class="no-content-placeholder"
>
<template #actions>
<v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
</template>
</v-empty-state>
</template>
</content-doc>
</article>
</v-container>
</template>
<style scoped>
.no-content-placeholder {
min-height: 0;
max-height: 64rem;
}
</style>
<script setup lang="ts">
const route = useRoute();
const { data: page } = await useAsyncData('page', queryContent(route.path).findOne)
</script>
<style scoped>
.content-container {
max-width: 65ch !important;
}
</style>