Final touches in anime page

app/components/ui/hoverable-image/HoverableImage.vue

@@ -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';
+    variant?: HoverableImageVariants['variant'];
-    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    size?: HoverableImageVariants['size'];
 }
 
 const props = withDefaults(defineProps<Props>(), {

app/components/ui/hoverable-image/index.ts

@@ -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",

app/pages/anime/[id].vue

@@ -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
+    <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">
-        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:min-w-72 xl:min-w-96 ">
-        <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" />
@@ -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"
+                <div class="flex flex-wrap gap-4 w-full">
-                    variant="default">
+                    <HoverableImage v-for="relation in data.relations" :src="relation.url" :alt="relation.name"
-                    <TooltipContent side="right" align="center" :side-offset="8" class="max-w-sm z-50"
+                        :title="relation.type" size="xsm" variant="default">
-                        tooltipColor="muted" :includeArrow="false">
+                        <TooltipContent side="right" align="center" :side-offset="8" class="z-50" tooltipColor="muted"
-                        <div class="space-y-2">
+                            :includeArrow="false">
-                            <h4 class="font-semibold text-sm">
+                            <div class="space-y-2">
-                                {{ data.title }}
+                                <h4 class="font-semibold text-xl">
-                            </h4>
+                                    {{ relation.name }}
+                                </h4>
 
-                            <div class="text-xs text-muted-foreground">
+                                <div class="text-lg text-muted-foreground">
-                                <slot>
+                                    <p>{{ relation.type }}</p>
-                                    <p>Hover over the image for more details</p>
+                                </div>
-                                </slot>
                             </div>
-                        </div>
+                        </TooltipContent>
-                    </TooltipContent>
+                    </HoverableImage>
-                </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">