Improve AnimeCard by adding tooltip and vibrant shadow

pages/search.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Icon } from '#components'
 import { search, type Result } from '~/openapi/search'
+import AnimeCard from '~/components/ui/anime-card/AnimeCard.vue';
 
 const route = useRoute()
 const searchQuery = ref(route.query.title as string || '')
@@ -41,22 +41,7 @@ watchEffect(async () => {
         <div v-if="results.length > 0"
             class="grid grid-cols-[repeat(auto-fill,16rem)] justify-around gap-8 grid-flow-row">
             <div v-for="item in results" :key="item.id" class="flex w-[16rem]">
-                <NuxtLink :to="`/anime/${item.id}`" class="w-full">
-                    <div v-if="item.material_data?.anime_poster_url"
-                        :style="{ 'background-image': 'url(' + item.material_data.anime_poster_url + ')' }"
-                        :alt="item.title"
-                        class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96">
-                        <div
-                            class="flex items-center px-2 py-0.5 backdrop-blur-none bg-primary/75 text-background/80 rounded-sm text-xs">
-                            <Icon name="gg:play-list" />
-                            {{ item.material_data?.episodes_total }}
-                            episode
-                        </div>
-                    </div>
-                    <div>
-                        <h3 className="text-xl font-semibold tracking-tight">{{ item.title }}</h3>
-                    </div>
-                </NuxtLink>
+                <AnimeCard :item="item" />
             </div>
         </div>