Final touches in anime page
This commit is contained in:
@ -3,7 +3,7 @@ import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ConfiguredImageProviders, ProviderDefaults } from '@nuxt/image';
|
||||
import type { HTMLAttributes } from 'vue';
|
||||
import { imageVariants } from '.';
|
||||
import { imageVariants, type HoverableImageVariants } from '.';
|
||||
|
||||
interface Props {
|
||||
src: string;
|
||||
@ -20,8 +20,8 @@ interface Props {
|
||||
overlayOpacity?: number;
|
||||
overlayClass?: string;
|
||||
imageClass?: string;
|
||||
variant?: 'default' | 'rounded' | 'elevated' | 'minimal';
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
||||
variant?: HoverableImageVariants['variant'];
|
||||
size?: HoverableImageVariants['size'];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -14,6 +14,7 @@ export const imageVariants = cva(
|
||||
minimal: "border-0",
|
||||
},
|
||||
size: {
|
||||
xsm: "max-w-40",
|
||||
sm: "max-w-xs",
|
||||
md: "max-w-md",
|
||||
lg: "max-w-lg",
|
||||
|
||||
@ -25,47 +25,53 @@ He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims sup
|
||||
status: "Finished",
|
||||
release: "Mar 25, 2008",
|
||||
season: "Spring 2008",
|
||||
translations: ["Anilibria", "Soviet Romantica", "AniDUB", "AniStar"],
|
||||
genres: ["Action", "Fantasy", "Sci-Fi"],
|
||||
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",
|
||||
name: ".hack//Roots"
|
||||
},
|
||||
{
|
||||
url: "/example/relation2.jpg",
|
||||
type: "Sequel",
|
||||
name: ".hack//G.U. Returner"
|
||||
},
|
||||
{
|
||||
url: "/example/relation3.jpg",
|
||||
type: "Alternative",
|
||||
name: ".hack//G.U."
|
||||
},
|
||||
{
|
||||
url: "/example/relation4.jpg",
|
||||
type: "Alternative",
|
||||
name: ".hack//G.U.+"
|
||||
},
|
||||
{
|
||||
url: "/example/relation5.jpg",
|
||||
type: "Side Story",
|
||||
name: ".hack//G.U. Returner Trilogy"
|
||||
},
|
||||
{
|
||||
url: "/example/relation6.jpg",
|
||||
type: "Summary",
|
||||
name: "Daitai 3-pun de Wakaru .hack History "
|
||||
},
|
||||
]
|
||||
}
|
||||
</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="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 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"
|
||||
sizes="sm:100vw md:50vw lg:448px xl:512px" />
|
||||
@ -118,9 +124,14 @@ He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims sup
|
||||
<p class="font-bold">Season</p>
|
||||
{{ data.season }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Translations</p>
|
||||
<Badge v-for="translation in data.translations" class="mx-2">{{ translation }}
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Genres</p>
|
||||
<Badge v-for="genre in data.genres" class="mx-2">{{ genre }}</Badge>
|
||||
<Badge variant="secondary" v-for="genre in data.genres" class="mx-2">{{ genre }}</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">Average Score</p>
|
||||
@ -169,23 +180,41 @@ He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims sup
|
||||
</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="flex flex-wrap gap-4 w-full">
|
||||
<HoverableImage v-for="relation in data.relations" :src="relation.url" :alt="relation.name"
|
||||
:title="relation.type" size="xsm" variant="default">
|
||||
<TooltipContent side="right" align="center" :side-offset="8" class="z-50" tooltipColor="muted"
|
||||
:includeArrow="false">
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-semibold text-sm">
|
||||
{{ data.title }}
|
||||
<h4 class="font-semibold text-xl">
|
||||
{{ relation.name }}
|
||||
</h4>
|
||||
|
||||
<div class="text-xs text-muted-foreground">
|
||||
<slot>
|
||||
<p>Hover over the image for more details</p>
|
||||
</slot>
|
||||
<div class="text-lg text-muted-foreground">
|
||||
<p>{{ relation.type }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</HoverableImage>
|
||||
</div>
|
||||
<span class="text-xl font-semibold">Characters</span>
|
||||
<div class="flex flex-wrap gap-4 w-full">
|
||||
<HoverableImage v-for="relation in data.relations" :src="relation.url" :alt="relation.name"
|
||||
:title="relation.type" size="xsm" variant="default">
|
||||
<TooltipContent side="right" align="center" :side-offset="8" class="z-50" tooltipColor="muted"
|
||||
:includeArrow="false">
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-semibold text-xl">
|
||||
{{ relation.name }}
|
||||
</h4>
|
||||
|
||||
<div class="text-lg text-muted-foreground">
|
||||
<p>{{ relation.type }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</HoverableImage>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="characters">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user