anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Feature] Better AnimeCard tooltip, fix watch endpoint (#3)

Browse Source 
Reviewed-on: #3
Co-authored-by: bivashy <botyrbojey@gmail.com>
Co-committed-by: bivashy <botyrbojey@gmail.com>
This commit is contained in:
bivashy
2025-07-20 19:19:26 +00:00
committed by bivashy
parent fb932170b6
commit 2ac072d82b
8 changed files with 104 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/components/ui/anime-card/AnimeCard.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
import type { Result } from '~/openapi/search';
import { Vibrant } from "node-vibrant/browser";
import Tooltip from '../tooltip/Tooltip.vue';
import TooltipTrigger from '../tooltip/TooltipTrigger.vue';
import TooltipContent from '../tooltip/TooltipContent.vue';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '../hover-card';
import { Icon } from '@iconify/vue'
interface AnimeItemProp {
item: Result
@ -29,8 +29,8 @@ onMounted(async () => {
</script>
<template>
<Tooltip>
<TooltipTrigger as-child>
<HoverCard>
<HoverCardTrigger as-child>
<NuxtLink :to="`/anime/${props.item.id}`" class="w-full group">
<div v-if="props.item.material_data?.anime_poster_url"
:style="{ 'background-image': 'url(' + props.item.material_data.anime_poster_url + ')', '--tw-shadow-color': 'rgb(' + vibrantColor + ')' }"
@ -38,7 +38,7 @@ onMounted(async () => {
class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96 group-hover:shadow transition-shadow">
<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" />
<Icon icon="gg:play-list" />
{{ props.item.material_data?.episodes_total }}
episode
</div>
@ -49,13 +49,24 @@ onMounted(async () => {
</h3>
</div>
</NuxtLink>
</TooltipTrigger>
<TooltipContent side="right">
<div class="max-w-96">
<span class="break-words">
{{ props.item.material_data?.description }}
</span>
</HoverCardTrigger>
<HoverCardContent>
<div class="flex justify-between space-x-4">
<div class="space-y-1">
<h3 class="text-2xl font-semibold tracking-tight">
{{ props.item.title }}
</h3>
<p class="text-sm">
{{ props.item.material_data?.description }}
</p>
<div class="flex items-center pt-2">
<Icon icon="lucide:calendar" class="mr-2 h-4 w-4 opacity-70" />
<span class="text-xs text-muted-foreground">
{{ props.item.material_data?.aired_at }}
</span>
</div>
</div>
</div>
</TooltipContent>
</Tooltip>
</HoverCardContent>
</HoverCard>
</template>