2024-07-02 15:07:22 +00:00
|
|
|
<template>
|
|
|
|
|
<v-carousel class="carousel-section" show-arrows="hover" cycle hide-delimiters>
|
|
|
|
|
<v-carousel-item v-for="(item, i) in props.products" :key="i" :src="item?.thumbnail" cover>
|
2024-08-10 08:09:17 +00:00
|
|
|
<v-sheet color="rgba(0, 0, 0, .4)" height="calc(100% + 24px)" class="p-5">
|
2024-07-02 15:07:22 +00:00
|
|
|
<v-row class="fill-height" align="center" justify="center">
|
|
|
|
|
<v-col class="text-center">
|
|
|
|
|
<h1 class="text-4xl font-bold text-white" :class="item?.archived ? 'line-through' : null">
|
|
|
|
|
{{ item?.title }}
|
|
|
|
|
</h1>
|
|
|
|
|
<p class="text-lg text-white">{{ item?.description }}</p>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center mt-3">
|
|
|
|
|
<v-btn variant="text" color="white" prepend-icon="mdi-school" text="Learn more" />
|
|
|
|
|
<v-btn
|
|
|
|
|
v-if="item?.url"
|
|
|
|
|
variant="text"
|
|
|
|
|
color="white"
|
|
|
|
|
prepend-icon="mdi-launch"
|
|
|
|
|
text="Open"
|
|
|
|
|
:href="item?.url"
|
|
|
|
|
target="_blank"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex justify-center">
|
|
|
|
|
<v-chip
|
|
|
|
|
v-if="item?.archived"
|
|
|
|
|
label
|
|
|
|
|
prepend-icon="mdi-archive"
|
|
|
|
|
variant="text"
|
|
|
|
|
color="warning"
|
|
|
|
|
size="small"
|
|
|
|
|
>
|
|
|
|
|
Archived
|
|
|
|
|
</v-chip>
|
|
|
|
|
</div>
|
|
|
|
|
</v-col>
|
|
|
|
|
</v-row>
|
|
|
|
|
</v-sheet>
|
|
|
|
|
</v-carousel-item>
|
|
|
|
|
</v-carousel>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
const props = defineProps<{ products: any[] }>()
|
|
|
|
|
</script>
|
