Mike
32 lines
887 B
Vue
32 lines
887 B
Vue
<template>
|
|
<section v-if="!error">
|
|
<h2 class="text-heading-sm text-foreground-2 mb-4">Tutorials</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
<DashboardTutorialsCard
|
|
v-for="webflowItem in webflowItems"
|
|
:key="webflowItem.id"
|
|
:webflow-item="webflowItem"
|
|
/>
|
|
</div>
|
|
</section>
|
|
<section v-else />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { WebflowItem } from '~/lib/dashboard/helpers/types'
|
|
|
|
const logger = useLogger()
|
|
|
|
const { data: webflowData, error } = await useAsyncData<{
|
|
items: WebflowItem[]
|
|
}>('webflow-items', () =>
|
|
$fetch<{ items: WebflowItem[] }>('/api/webflow', {
|
|
onResponseError({ response }) {
|
|
logger.error('API Response Error:', response.status, response.statusText)
|
|
}
|
|
})
|
|
)
|
|
|
|
const webflowItems = computed(() => webflowData.value?.items || [])
|
|
</script>
|