diff options
Diffstat (limited to 'components/Popular.vue')
| -rw-r--r-- | components/Popular.vue | 22 |
1 files changed, 6 insertions, 16 deletions
diff --git a/components/Popular.vue b/components/Popular.vue index 4b2dbcf..a8ac5d7 100644 --- a/components/Popular.vue +++ b/components/Popular.vue @@ -5,13 +5,13 @@ <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 popular"> - <NuxtImg :src="item.cover" :alt="item.title" :title="item.title" + <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data"> + <NuxtImg :src="item.coverImage.large" :alt="item.title.romaji" :title="item.title.romaji" class="w-full h-44 md:h-56 object-cover rounded-sm hover:scale-95" /> - <h6 class="text-primary text-sm truncate">{{ item.title }}</h6> + <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6> <div class="flex items-center gap-1"> - <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.type }}</p> - <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.year }}</p> + <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> @@ -19,15 +19,5 @@ </template> <script setup> -const { data: popular } = await useFetch("https://api.amvstr.me/api/v2/popular?limit=8", { - transform: (popular) => { - return popular.results.map((anime) => ({ - id: anime.id, - title: anime.title.romaji, - cover: anime.coverImage.large, - type: anime.format, - year: anime.seasonYear - })); - } -}); +const { data } = await useFetch("/api/popular"); </script>
\ No newline at end of file |