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

Restructure search anime json mock

Browse Source
This commit is contained in:
bivashy
2026-02-28 00:42:28 +05:00
parent 0b61402be5
commit 3de38c650b
2 changed files with 91 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/ui/internal/MediaImageCard.vue
View File

@@ -27,14 +27,14 @@ interface Props {
description?: string; description?: string;
tooltipEnabled?: boolean; tooltipEnabled?: boolean;
tooltipMetadata?: { tooltipMetadata: {
studio: string; studio: string;
type: string; type: string;
episodes: number; episodes: number;
rating: number; rating: number;
tags?: string[]; tags?: string[];
}; },
tooltipCollisionBoundary?: Element; tooltipCollisionBoundary?: Element;
dynamicColor?: boolean; dynamicColor?: boolean;

212
app/pages/index.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { Search, SlidersHorizontal } from 'lucide-vue-next';
import HeroSection from '@/components/ui/internal/HeroSection.vue'; import HeroSection from '@/components/ui/internal/HeroSection.vue';
import { Search, SlidersHorizontal } from 'lucide-vue-next';
import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue'; import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue'; import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';
@@ -11,177 +11,143 @@ const trendingAnime = [
id: 1, id: 1,
image_url: "example/jigokuraku.jpg", image_url: "example/jigokuraku.jpg",
title: "Jigokuraku 2nd Season", title: "Jigokuraku 2nd Season",
type: "anime", studio: "MAPPA",
tooltipMetadata: { type: "TV Show",
studio: "MAPPA", episodes: 12,
type: "TV Show", rating: 78,
episodes: 12, tags: ["action", "adventure", "dark fantasy"],
rating: 78, status: "Ongoing",
tags: ["action", "adventure", "dark fantasy"], duration: "23 min"
status: "Ongoing",
season: "Spring 2024",
duration: "23 min"
}
}, },
{ {
id: 2, id: 2,
image_url: "example/jujutsukaisen.jpg", image_url: "example/jujutsukaisen.jpg",
title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen", title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen",
type: "anime", studio: "MAPPA",
tooltipMetadata: { type: "TV Show",
studio: "MAPPA", episodes: 24,
type: "TV Show", rating: 85,
episodes: 24, tags: ["action", "supernatural", "dark fantasy"],
rating: 85, status: "Finished",
tags: ["action", "supernatural", "dark fantasy"], duration: "23 min"
status: "Finished",
season: "Fall 2023",
duration: "23 min"
}
}, },
{ {
id: 3, id: 3,
image_url: "example/okiraku.jpg", image_url: "example/okiraku.jpg",
title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei", title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei",
type: "anime", studio: "CloverWorks",
tooltipMetadata: { type: "TV Show",
studio: "CloverWorks", episodes: 13,
type: "TV Show", rating: 72,
episodes: 13, tags: ["comedy", "fantasy", "slice of life"],
rating: 72, status: "Ongoing",
tags: ["comedy", "fantasy", "slice of life"], duration: "24 min"
status: "Ongoing",
season: "Winter 2024",
duration: "24 min"
}
}, },
{ {
id: 4, id: 4,
image_url: "example/oshi no ko.jpg", image_url: "example/oshi no ko.jpg",
title: "[Oshi no Ko] 3rd Season", title: "[Oshi no Ko] 3rd Season",
type: "anime", studio: "Doga Kobo",
tooltipMetadata: { type: "TV Show",
studio: "Doga Kobo", episodes: 11,
type: "TV Show", rating: 88,
episodes: 11, tags: ["drama", "psychological", "showbiz"],
rating: 88, status: "Airing",
tags: ["drama", "psychological", "showbiz"], duration: "24 min"
status: "Airing",
season: "Spring 2024",
duration: "24 min"
}
}, },
{ {
id: 5, id: 5,
image_url: "example/shibou.jpg", image_url: "example/shibou.jpg",
title: "Shibou Yuugi de Meshi wo Kuu.", title: "Shibou Yuugi de Meshi wo Kuu.",
type: "anime", studio: "Studio Bind",
tooltipMetadata: { type: "TV Show",
studio: "Studio Bind", episodes: 12,
type: "TV Show", rating: 75,
episodes: 12, tags: ["cooking", "fantasy", "isekai"],
rating: 75, status: "Finished",
tags: ["cooking", "fantasy", "isekai"], duration: "23 min"
status: "Finished",
season: "Fall 2023",
duration: "23 min"
}
}, },
{ {
id: 6, id: 6,
image_url: "example/sousounofrieren.jpg", image_url: "example/sousounofrieren.jpg",
title: "Sousou no Frieren 2nd Season", title: "Sousou no Frieren 2nd Season",
type: "anime", studio: "Madhouse",
tooltipMetadata: { type: "TV Show",
studio: "Madhouse", episodes: 28,
type: "TV Show", rating: 92,
episodes: 28, tags: ["adventure", "drama", "fantasy"],
rating: 92, status: "Airing",
tags: ["adventure", "drama", "fantasy"], duration: "24 min"
status: "Airing",
season: "Spring 2024",
duration: "24 min"
}
}, },
{ {
id: 7, id: 7,
image_url: "example/tamonkun.jpg", image_url: "example/tamonkun.jpg",
title: "Tamon-kun Ima Docchi!?", title: "Tamon-kun Ima Docchi!?",
type: "anime", studio: "Kyoto Animation",
tooltipMetadata: { type: "TV Show",
studio: "Kyoto Animation", episodes: 12,
type: "TV Show", rating: 68,
episodes: 12, tags: ["comedy", "romance", "school"],
rating: 68, status: "Ongoing",
tags: ["comedy", "romance", "school"], duration: "24 min"
status: "Ongoing",
season: "Winter 2024",
duration: "24 min"
}
}, },
{ {
id: 8, id: 8,
image_url: "example/yuusha party.jpg", image_url: "example/yuusha party.jpg",
title: "Yuusha Party wo Oidasareta Kiyou Binbou", title: "Yuusha Party wo Oidasareta Kiyou Binbou",
type: "anime", studio: "Wit Studio",
tooltipMetadata: { type: "TV Show",
studio: "Wit Studio", episodes: 13,
type: "TV Show", rating: 70,
episodes: 13, tags: ["action", "adventure", "fantasy"],
rating: 70, status: "Finished",
tags: ["action", "adventure", "fantasy"], duration: "23 min"
status: "Finished",
season: "Fall 2023",
duration: "23 min"
}
}, },
{ {
id: 9, id: 9,
image_url: "example/jujutsukaisen.jpg", image_url: "example/jujutsukaisen.jpg",
title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen soetjsot giwjiagjwiag wgi wajig wig gwi", title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen soetjsot giwjiagjwiag wgi wajig wig gwi",
type: "anime", studio: "MAPPA",
tooltipMetadata: { type: "TV Show",
studio: "MAPPA", episodes: 24,
type: "TV Show", rating: 85,
episodes: 24, tags: ["action", "supernatural", "dark fantasy"],
rating: 85, status: "Finished",
tags: ["action", "supernatural", "dark fantasy"], duration: "23 min"
status: "Finished",
season: "Fall 2023",
duration: "23 min"
}
}, },
{ {
id: 10, id: 10,
image_url: "example/okiraku.jpg", image_url: "example/okiraku.jpg",
title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei teisotsoeitj wgjiwag wgj wigwji", title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei teisotsoeitj wgjiwag wgj wigwji",
type: "anime", studio: "CloverWorks",
tooltipMetadata: { type: "TV Show",
studio: "CloverWorks", episodes: 13,
type: "TV Show", rating: 72,
episodes: 13, tags: ["comedy", "fantasy", "slice of life"],
rating: 72, status: "Ongoing",
tags: ["comedy", "fantasy", "slice of life"], duration: "24 min"
status: "Ongoing",
season: "Winter 2024",
duration: "24 min"
}
}, },
{ {
id: 11, id: 11,
image_url: "example/oshi no ko.jpg", image_url: "example/oshi no ko.jpg",
title: "[Oshi no Ko] 3rd Season iaowjegiogjoiawgio waiogjawiog wag", title: "[Oshi no Ko] 3rd Season iaowjegiogjoiawgio waiogjawiog wag",
type: "anime", studio: "Doga Kobo",
tooltipMetadata: { type: "TV Show",
studio: "Doga Kobo", episodes: 11,
type: "TV Show", rating: 88,
episodes: 11, tags: ["drama", "psychological", "showbiz"],
rating: 88, status: "Airing",
tags: ["drama", "psychological", "showbiz"], duration: "24 min"
status: "Airing",
season: "Spring 2024",
duration: "24 min"
}
} }
]; ];
</script> </script>
@@ -214,7 +180,7 @@ const trendingAnime = [
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"> 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" <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" :image_url="anime.image_url" :title="anime.title" :type="anime.type" :tooltipEnabled="true"
:tooltipMetadata="anime.tooltipMetadata" :tooltipCollisionBoundary="tooltipCollisionBoundary" /> :tooltipMetadata="anime" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<SkeletonMediaImageCard v-for="index in 10" /> <SkeletonMediaImageCard v-for="index in 10" />
</div> </div>
</div> </div>