Files
Musify/web-player/src/lib/components/ui/MediaCard.svelte
T
Admin c14db5a711 Checkpoint web-player design-system refactor and backend track genre tagging
Advances the ongoing token/componentization cleanup (anchored player dock,
border-based panels instead of floating shadows, corrected light-mode
accent/gradient tokens) alongside in-progress backend support for track
genre tags.
2026-09-17 17:43:37 +02:00

33 lines
756 B
Svelte

<script lang="ts" module>
export const mediaCardArt =
'aspect-square w-full rounded-art transition duration-300 ease-out';
</script>
<script lang="ts">
import type { Snippet } from 'svelte';
interface Props {
href: string;
title: string;
subtitle?: string | null;
index?: number;
oncontextmenu?: (event: MouseEvent) => void;
art: Snippet<[string]>;
}
let { href, title, subtitle, index = 0, oncontextmenu, art }: Props = $props();
</script>
<a
{href}
class="group animate-enter min-w-0 text-left"
style="animation-delay:{index * 45}ms"
{oncontextmenu}
>
{@render art(mediaCardArt)}
<div class="mt-2.5 truncate text-fg">{title}</div>
{#if subtitle}
<div class="mt-0.5 truncate text-xs text-fg-3">{subtitle}</div>
{/if}
</a>