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

Basic implementation for anime page

Browse Source
This commit is contained in:
bivashy
2026-01-18 00:46:32 +05:00
parent da573b6b33
commit 7390c631d5
31 changed files with 846 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
app/components/ui/internal/MediaImageCard.vue
View File

@ -17,10 +17,11 @@ watch(palette, () => {
});
interface Props {
id: number;
image_url: string;
image_alt?: string;
title: string;
type: 'anime' | 'manga' | 'character' | 'voice_actor';
type: string;
subtitle?: string;
description?: string;
@ -46,45 +47,46 @@ const props = defineProps<Props>();
</script>
<template>
<div class="h-full overflow-hidden max-w-64">
<div class="flex flex-col gap-2 cursor-pointer text-muted-foreground vibrant-color">
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
<div>
<NuxtImg class="rounded-lg" ref="imageElement" :src="props.image_url" sizes="128px md:256px"
quality="100" />
<p class="text-lg line-clamp-2 font-semibold">
{{ props.title }}
</p>
</div>
</TooltipTrigger>
<TooltipContent :sideOffset="16" :collisionBoundary="props.tooltipCollisionBoundary"
:avoidCollisions="true" side="right" class="bg-muted text-muted-foreground"
arrowClass="bg-muted fill-muted">
<div class="flex flex-col gap-1 m-4">
<div class="flex">
<p class="text-xl font-bold truncate max-w-[24ch]">{{ props.title }}</p>
<NuxtLink :to="`anime/${id}`">
<div class="h-full overflow-hidden max-w-64">
<div class="flex flex-col gap-2 cursor-pointer text-muted-foreground vibrant-color">
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
<div>
<NuxtImg class="rounded-lg" ref="imageElement" :src="props.image_url"
sizes="128px md:256px" quality="100" />
<p class="text-lg line-clamp-2 font-semibold max-w-[12ch] 2xl:max-w-full">
{{ props.title }}
</p>
</div>
<p class="text-lg font-semibold tracking-wider" :style="{ color: paletteVibrantHsl }">{{
props.tooltipMetadata?.studio }}
</p>
<div class="flex items-center text-base font-semibold">
<p>{{ props.tooltipMetadata?.type }}</p>
<Dot />
<p>{{ props.tooltipMetadata?.rating }} episodes</p>
</TooltipTrigger>
<TooltipContent :sideOffset="16" :collisionBoundary="props.tooltipCollisionBoundary"
:avoidCollisions="true" side="right" tooltipColor="muted" tooltipArrowColor="muted">
<div class="flex flex-col gap-1 m-4">
<div class="flex">
<p class="text-xl font-bold truncate max-w-[24ch]">{{ props.title }}</p>
</div>
<p class="text-lg font-semibold tracking-wider" :style="{ color: paletteVibrantHsl }">{{
props.tooltipMetadata?.studio }}
</p>
<div class="flex items-center text-base font-semibold">
<p>{{ props.tooltipMetadata?.type }}</p>
<Dot />
<p>{{ props.tooltipMetadata?.rating }} episodes</p>
</div>
<div class="flex gap-2">
<Badge v-for="tag in props.tooltipMetadata?.tags">
{{ tag }}
</Badge>
</div>
</div>
<div class="flex gap-2">
<Badge v-for="tag in props.tooltipMetadata?.tags">
{{ tag }}
</Badge>
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
</div>
</NuxtLink>
</template>
<style scoped>