Basic implementation for anime page
This commit is contained in:
197
app/pages/anime/[id].vue
Normal file
197
app/pages/anime/[id].vue
Normal file
@ -0,0 +1,197 @@
|
||||
<script setup lang="ts">
|
||||
import Badge from '~/components/ui/badge/Badge.vue';
|
||||
import HoverableImage from '~/components/ui/hoverable-image/HoverableImage.vue';
|
||||
import Tabs from '~/components/ui/tabs/Tabs.vue';
|
||||
import TabsContent from '~/components/ui/tabs/TabsContent.vue';
|
||||
import TabsList from '~/components/ui/tabs/TabsList.vue';
|
||||
import TabsTrigger from '~/components/ui/tabs/TabsTrigger.vue';
|
||||
|
||||
const data = {
|
||||
title: " .hack//G.U. Trilogy",
|
||||
poster: "example/hackguposter.jpg",
|
||||
description: `Based on the CyberConnect2 HIT GAME, now will be released in a CG Movie!
|
||||
|
||||
The Movie will be placed in the storyline of each .hack//G.U. games trilogy. The story follows Haseo, a player in the online MMORPG called The World:R2 at first depicted as a PKK (Player Killer Killer) known as the "Terror of Death", a former member of the disbanded Twilight Brigade guild. Haseo encounters Azure Kite (believing him to be Tri-Edge and blaming him for what happened to Shino) but is hopelessly outmatched. Azure Kite easily defeats Haseo and Data Drains him, reducing his level from 133 to 1 and leaving him without any items, weapons, or member addresses. He is left with a mystery on his hands as to the nature of the Data Drain and why Azure Kite is in possession of such a skill.
|
||||
|
||||
Eventually Haseo gains the "Avatar" of Skeith. Acquiring the ability to call Skeith and wield his abilities, such as Data Drain. With Skeith as his strength, Haseo begins the quest for a way to save Shino.
|
||||
|
||||
He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims supposedly are unable to return to The World after he PKs them. Haseo's friend, Shino, was attacked six months prior to the events of the game by Tri-Edge, and the player herself, Shino Nanao, was left in a coma.
|
||||
|
||||
(Source: AniDB)
|
||||
`,
|
||||
format: "Movie",
|
||||
episodes: 1,
|
||||
duration: "1 hour, 33 mins",
|
||||
status: "Finished",
|
||||
release: "Mar 25, 2008",
|
||||
season: "Spring 2008",
|
||||
average: 67,
|
||||
mean: 67,
|
||||
popularity: 5481,
|
||||
favorites: 36,
|
||||
producers: ["Bandai Visual", "CyberConnect2", "Hanabee Entartainment", "Funimation"],
|
||||
source: "Video Game",
|
||||
genres: ["Action", "Fantasy", "Sci-Fi"],
|
||||
romaji: ".hack//G.U. Trilogy",
|
||||
native: ".hack//G.U. Trilogy",
|
||||
relations: [
|
||||
{
|
||||
url: "/example/relation1.png",
|
||||
type: "Prequel",
|
||||
},
|
||||
{
|
||||
url: "/example/relation2.jpg",
|
||||
type: "Sequel",
|
||||
},
|
||||
{
|
||||
url: "/example/relation3.jpg",
|
||||
type: "Alternative",
|
||||
},
|
||||
{
|
||||
url: "/example/relation4.jpg",
|
||||
type: "Alternative",
|
||||
},
|
||||
{
|
||||
url: "/example/relation5.jpg",
|
||||
type: "Side Story",
|
||||
},
|
||||
{
|
||||
url: "/example/relation6.jpg",
|
||||
type: "Summary",
|
||||
},
|
||||
]
|
||||
}
|
||||
</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:min-h-3/4 xl:max-h-3/4">
|
||||
<div class="flex flex-col items-center lg:items-start gap-4 lg:gap-6 lg:w-auto 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"
|
||||
sizes="sm:100vw md:50vw lg:448px xl:512px" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-1 gap-2 w-full">
|
||||
<Button class="w-full">
|
||||
Watch Now
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<div class="space-y-4 xl:h-full">
|
||||
<h3 class="text-xl md:text-2xl xl:text-3xl font-bold tracking-tight">
|
||||
{{ data.title }}
|
||||
</h3>
|
||||
<div class="xl:h-full overflow-scroll">
|
||||
<p
|
||||
class="text-base lg:text-lg text-muted-foreground leading-relaxed md:leading-loose whitespace-pre-line transition-colors hover:text-foreground">
|
||||
{{ data.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 p-4 sm:p-6 md:p-8 lg:p-12">
|
||||
<div class="bg-muted text-muted-foreground text-xl space-y-4 min-w-96 p-8">
|
||||
<div>
|
||||
<p class="font-bold">Format</p>
|
||||
{{ data.format }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Episodes</p>
|
||||
{{ data.episodes }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Duration</p>
|
||||
{{ data.duration }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Status</p>
|
||||
<Badge>{{ data.status }}</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Release</p>
|
||||
{{ data.release }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Season</p>
|
||||
{{ data.season }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Genres</p>
|
||||
<Badge v-for="genre in data.genres" class="mx-2">{{ genre }}</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Average Score</p>
|
||||
{{ data.average }}%
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Mean Score</p>
|
||||
{{ data.mean }}%
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Popularity</p>
|
||||
{{ data.popularity }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Favorites</p>
|
||||
{{ data.favorites }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Producers</p>
|
||||
<p v-for="producer in data.producers">{{ producer }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Source</p>
|
||||
{{ data.source }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Romaji</p>
|
||||
{{ data.romaji }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Native</p>
|
||||
{{ data.native }}
|
||||
</div>
|
||||
</div>
|
||||
<Tabs default-value="overview" class="w-full h-fit">
|
||||
<TabsList class="w-full flex-1 mb-4">
|
||||
<TabsTrigger value="overview">
|
||||
Overview
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="characters">
|
||||
Characters
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="staff">
|
||||
Staff
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="overview">
|
||||
<span class="text-xl font-semibold">Relations</span>
|
||||
<HoverableImage src="/example/jigokuraku.jpg" alt="Description" title="Image Title" size="md"
|
||||
variant="default">
|
||||
<TooltipContent side="right" align="center" :side-offset="8" class="max-w-sm z-50"
|
||||
tooltipColor="muted" :includeArrow="false">
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-semibold text-sm">
|
||||
{{ data.title }}
|
||||
</h4>
|
||||
|
||||
<div class="text-xs text-muted-foreground">
|
||||
<slot>
|
||||
<p>Hover over the image for more details</p>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</HoverableImage>
|
||||
</TabsContent>
|
||||
<TabsContent value="characters">
|
||||
|
||||
</TabsContent>
|
||||
<TabsContent value="staff">
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user