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.
33 lines
756 B
Svelte
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>
|