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

Basic implementation for anime page

Browse Source
This commit is contained in:
bivashy
2026-01-18 00:46:32 +05:00
parent da573b6b33
commit 7390c631d5
31 changed files with 846 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
app/pages/index.vue
View File

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