anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate api with hey-api

Browse Source
This commit is contained in:
bivashy
2026-03-06 16:38:04 +05:00
parent 3de38c650b
commit 5a69c6f39f
22 changed files with 2217 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/pages/anime/[id].vue
View File

@@ -70,7 +70,7 @@ He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims sup
}
</script>
<template>
<div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 bg-muted p-4 sm:p-6 md:p-8 lg:p-12 xl:max-h-3/4">
<div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 bg-muted p-4 sm:p-6 md:p-8 lg:p-12 xl:max-h-5/6">
<div class="flex flex-col items-center lg:items-start gap-4 lg:gap-6 lg:min-w-72 xl:min-w-96 ">
<div class="max-w-xs lg:max-w-sm xl:max-w-md">
<NuxtImg :src="data.poster" class="w-full object-cover aspect-3/4 rounded-lg shadow-lg"

166
app/pages/index.vue
View File

@@ -3,153 +3,20 @@ import HeroSection from '@/components/ui/internal/HeroSection.vue';
import { Search, SlidersHorizontal } from 'lucide-vue-next';
import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';
import { refDebounced } from '@vueuse/core'
import { getSearch } from '~/openapi/generated';
const tooltipCollisionBoundary = ref<Element | undefined>(undefined);
const trendingAnime = [
{
id: 1,
image_url: "example/jigokuraku.jpg",
title: "Jigokuraku 2nd Season",
studio: "MAPPA",
type: "TV Show",
episodes: 12,
rating: 78,
tags: ["action", "adventure", "dark fantasy"],
status: "Ongoing",
duration: "23 min"
const searchTitle = ref('')
const debouncedSearchTitle = refDebounced(searchTitle, 1000);
},
{
id: 2,
image_url: "example/jujutsukaisen.jpg",
title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen",
studio: "MAPPA",
type: "TV Show",
episodes: 24,
rating: 85,
tags: ["action", "supernatural", "dark fantasy"],
status: "Finished",
duration: "23 min"
},
{
id: 3,
image_url: "example/okiraku.jpg",
title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei",
studio: "CloverWorks",
type: "TV Show",
episodes: 13,
rating: 72,
tags: ["comedy", "fantasy", "slice of life"],
status: "Ongoing",
duration: "24 min"
},
{
id: 4,
image_url: "example/oshi no ko.jpg",
title: "[Oshi no Ko] 3rd Season",
studio: "Doga Kobo",
type: "TV Show",
episodes: 11,
rating: 88,
tags: ["drama", "psychological", "showbiz"],
status: "Airing",
duration: "24 min"
},
{
id: 5,
image_url: "example/shibou.jpg",
title: "Shibou Yuugi de Meshi wo Kuu.",
studio: "Studio Bind",
type: "TV Show",
episodes: 12,
rating: 75,
tags: ["cooking", "fantasy", "isekai"],
status: "Finished",
duration: "23 min"
},
{
id: 6,
image_url: "example/sousounofrieren.jpg",
title: "Sousou no Frieren 2nd Season",
studio: "Madhouse",
type: "TV Show",
episodes: 28,
rating: 92,
tags: ["adventure", "drama", "fantasy"],
status: "Airing",
duration: "24 min"
},
{
id: 7,
image_url: "example/tamonkun.jpg",
title: "Tamon-kun Ima Docchi!?",
studio: "Kyoto Animation",
type: "TV Show",
episodes: 12,
rating: 68,
tags: ["comedy", "romance", "school"],
status: "Ongoing",
duration: "24 min"
},
{
id: 8,
image_url: "example/yuusha party.jpg",
title: "Yuusha Party wo Oidasareta Kiyou Binbou",
studio: "Wit Studio",
type: "TV Show",
episodes: 13,
rating: 70,
tags: ["action", "adventure", "fantasy"],
status: "Finished",
duration: "23 min"
},
{
id: 9,
image_url: "example/jujutsukaisen.jpg",
title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen soetjsot giwjiagjwiag wgi wajig wig gwi",
studio: "MAPPA",
type: "TV Show",
episodes: 24,
rating: 85,
tags: ["action", "supernatural", "dark fantasy"],
status: "Finished",
duration: "23 min"
},
{
id: 10,
image_url: "example/okiraku.jpg",
title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei teisotsoeitj wgjiwag wgj wigwji",
studio: "CloverWorks",
type: "TV Show",
episodes: 13,
rating: 72,
tags: ["comedy", "fantasy", "slice of life"],
status: "Ongoing",
duration: "24 min"
},
{
id: 11,
image_url: "example/oshi no ko.jpg",
title: "[Oshi no Ko] 3rd Season iaowjegiogjoiawgio waiogjawiog wag",
studio: "Doga Kobo",
type: "TV Show",
episodes: 11,
rating: 88,
tags: ["drama", "psychological", "showbiz"],
status: "Airing",
duration: "24 min"
const { data: trendingAnimeData, status, error } = await getSearch({
composable: 'useFetch',
query: {
title: debouncedSearchTitle
}
];
})
</script>
<template>
@@ -158,7 +25,7 @@ const trendingAnime = [
<div class="flex flex-col items-center m-8 gap-8">
<div class="flex gap-4 max-w-1/4 md:min-w-3xl sm:min-w-64">
<InputGroup>
<InputGroupInput placeholder="Search" />
<InputGroupInput placeholder="Search" v-model="searchTitle" />
<InputGroupAddon>
<Search />
</InputGroupAddon>
@@ -178,10 +45,15 @@ const trendingAnime = [
</div>
<div ref="tooltipCollisionBoundary"
class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4 gap-y-12 justify-items-center w-full">
<MediaImageCard v-for="anime in trendingAnime" :key="anime.id" :id="anime.id"
:image_url="anime.image_url" :title="anime.title" :type="anime.type" :tooltipEnabled="true"
:tooltipMetadata="anime" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<SkeletonMediaImageCard v-for="index in 10" />
<template v-if="status === 'pending'">
<SkeletonMediaImageCard v-for="index in 10" :key="index" />
</template>
<template v-else-if="status === 'success'">
<MediaImageCard v-for="anime in trendingAnimeData?.result || []" :key="anime.title"
:id="anime.id!" :image_url="anime?.posterURLs?.[0] || 'TODO'" :title="anime.title || 'TODO'"
:tooltipEnabled="true" :tooltipMetadata="anime"
:tooltipCollisionBoundary="tooltipCollisionBoundary" />
</template>
</div>
</div>
</div>