diff options
Diffstat (limited to 'components/Popular.vue')
| -rw-r--r-- | components/Popular.vue | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/components/Popular.vue b/components/Popular.vue new file mode 100644 index 0000000..8e1a707 --- /dev/null +++ b/components/Popular.vue @@ -0,0 +1,22 @@ +<template> + <section class="space-y-4"> + <section class="flex flex-col"> + <h2 class="text-secondary text-xl font-semibold">All Time Popular</h2> + <p class="text-primary text-sm">Most Popular Anime</p> + </section> + <section class="grid grid-cols-2 md:grid-cols-8 gap-2"> + <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data.results"> + <NuxtImg :src="item.coverImage.large" class="w-full h-44 md:h-56 object-cover rounded-sm" /> + <h2 class="text-primary text-sm truncate">{{ item.title.romaji }}</h2> + <div class="flex items-center gap-1"> + <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p> + <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.seasonYear }}</p> + </div> + </NuxtLink> + </section> + </section> +</template> + +<script setup> +const { data } = await useFetch("https://api.amvstr.me/api/v2/popular?limit=8"); +</script>
\ No newline at end of file |