40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import type { WebNovel } from '~/types'
|
|
|
|
interface Props {
|
|
novels?: WebNovel[]
|
|
loading?: boolean
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
loading: false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Featured Novels</h2>
|
|
<NuxtLink to="/novels" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">
|
|
View All
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<USkeleton v-for="i in 4" :key="i" class="h-64 rounded-lg" />
|
|
</div>
|
|
|
|
<div v-else-if="novels && novels.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<NovelCard
|
|
v-for="novel in novels.slice(0, 4)"
|
|
:key="novel.id"
|
|
:novel="novel"
|
|
/>
|
|
</div>
|
|
|
|
<div v-else class="py-12 text-center text-gray-500 dark:text-gray-400">
|
|
<p>No novels available</p>
|
|
</div>
|
|
</div>
|
|
</template>
|