From 3de38c650b299e802a1676507a642faa647a5456 Mon Sep 17 00:00:00 2001
From: bivashy <me@bivashy.dev>
Date: Sat, 28 Feb 2026 00:42:28 +0500
Subject: [PATCH] Restructure search anime json mock

---
 app/components/ui/internal/MediaImageCard.vue |   4 +-
 app/pages/index.vue                           | 212 ++++++++----------
 2 files changed, 91 insertions(+), 125 deletions(-)

diff --git a/app/components/ui/internal/MediaImageCard.vue b/app/components/ui/internal/MediaImageCard.vue
index 2803354..2d4365a 100644
--- a/app/components/ui/internal/MediaImageCard.vue
+++ b/app/components/ui/internal/MediaImageCard.vue
@@ -27,14 +27,14 @@ interface Props {
     description?: string;
 
     tooltipEnabled?: boolean;
-    tooltipMetadata?: {
+    tooltipMetadata: {
         studio: string;
         type: string;
         episodes: number;
         rating: number;
 
         tags?: string[];
-    };
+    },
     tooltipCollisionBoundary?: Element;
 
     dynamicColor?: boolean;
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 8b67447..70d8237 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Search, SlidersHorizontal } from 'lucide-vue-next';
 import HeroSection from '@/components/ui/internal/HeroSection.vue';
+import { Search, SlidersHorizontal } from 'lucide-vue-next';
 import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
 import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';
 
@@ -11,177 +11,143 @@ 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"
-        }
+        studio: "MAPPA",
+        type: "TV Show",
+        episodes: 12,
+        rating: 78,
+        tags: ["action", "adventure", "dark fantasy"],
+        status: "Ongoing",
+        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"
-        }
+        studio: "MAPPA",
+        type: "TV Show",
+        episodes: 24,
+        rating: 85,
+        tags: ["action", "supernatural", "dark fantasy"],
+        status: "Finished",
+        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"
-        }
+        studio: "CloverWorks",
+        type: "TV Show",
+        episodes: 13,
+        rating: 72,
+        tags: ["comedy", "fantasy", "slice of life"],
+        status: "Ongoing",
+        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"
-        }
+        studio: "Doga Kobo",
+        type: "TV Show",
+        episodes: 11,
+        rating: 88,
+        tags: ["drama", "psychological", "showbiz"],
+        status: "Airing",
+        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"
-        }
+        studio: "Studio Bind",
+        type: "TV Show",
+        episodes: 12,
+        rating: 75,
+        tags: ["cooking", "fantasy", "isekai"],
+        status: "Finished",
+        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"
-        }
+        studio: "Madhouse",
+        type: "TV Show",
+        episodes: 28,
+        rating: 92,
+        tags: ["adventure", "drama", "fantasy"],
+        status: "Airing",
+        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"
-        }
+        studio: "Kyoto Animation",
+        type: "TV Show",
+        episodes: 12,
+        rating: 68,
+        tags: ["comedy", "romance", "school"],
+        status: "Ongoing",
+        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"
-        }
+        studio: "Wit Studio",
+        type: "TV Show",
+        episodes: 13,
+        rating: 70,
+        tags: ["action", "adventure", "fantasy"],
+        status: "Finished",
+        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"
-        }
+        studio: "MAPPA",
+        type: "TV Show",
+        episodes: 24,
+        rating: 85,
+        tags: ["action", "supernatural", "dark fantasy"],
+        status: "Finished",
+        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"
-        }
+        studio: "CloverWorks",
+        type: "TV Show",
+        episodes: 13,
+        rating: 72,
+        tags: ["comedy", "fantasy", "slice of life"],
+        status: "Ongoing",
+        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"
-        }
+        studio: "Doga Kobo",
+        type: "TV Show",
+        episodes: 11,
+        rating: 88,
+        tags: ["drama", "psychological", "showbiz"],
+        status: "Airing",
+        duration: "24 min"
     }
 ];
 </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">
                     <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" />
+                        :tooltipMetadata="anime" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                     <SkeletonMediaImageCard v-for="index in 10" />
                 </div>
             </div>