Product index

This commit is contained in:
LittleSheep 2024-08-10 16:40:59 +08:00
parent ecc17c5cf5
commit 0758f2d5c1
3 changed files with 72 additions and 3 deletions

View File

@ -10,7 +10,7 @@
<p class="text-lg text-white">{{ item?.description }}</p> <p class="text-lg text-white">{{ item?.description }}</p>
<div class="flex justify-center mt-3"> <div class="flex justify-center mt-3">
<v-btn variant="text" color="white" prepend-icon="mdi-school" text="Learn more" /> <v-btn variant="text" color="white" prepend-icon="mdi-school" text="Learn more" :to="item._path" />
<v-btn <v-btn
v-if="item?.url" v-if="item?.url"
variant="text" variant="text"

View File

@ -1,5 +1,30 @@
<template> <template>
<v-container> <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"> <article class="text-base prose prose-truegray xl:text-lg mx-auto">
<content-doc> <content-doc>
<template #empty> <template #empty>
@ -37,5 +62,14 @@
max-height: 64rem; max-height: 64rem;
} }
</style> </style>
<script setup lang="ts"> <script setup lang="ts">
const route = useRoute();
const { data: page } = await useAsyncData('page', queryContent(route.path).findOne)
</script> </script>
<style scoped>
.content-container {
max-width: 65ch !important;
}
</style>

View File

@ -1,3 +1,38 @@
<template> <template>
<v-container></v-container> <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> </template>
<script setup lang="ts">
const { data: products } = await useAsyncData("products", () => queryContent("/products").find())
</script>
<style scoped>
.content-container {
max-width: 65ch !important;
}
</style>