feat(web): add AlbumCard component

Grid card used on the artist detail page. Cover image, title, year.
Broken covers swap to FALLBACK_COVER via onerror.
This commit is contained in:
2026-04-23 18:39:42 -04:00
parent a1252c1ef4
commit e9b482da0c
2 changed files with 69 additions and 0 deletions
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts">
import type { AlbumRef } from '$lib/api/types';
import { FALLBACK_COVER } from '$lib/media/covers';
let { album }: { album: AlbumRef } = $props();
function onImgError(e: Event) {
(e.currentTarget as HTMLImageElement).src = FALLBACK_COVER;
}
</script>
<a
href={`/albums/${album.id}`}
class="group block rounded focus-visible:ring-2 focus-visible:ring-accent"
>
<img
src={album.cover_url}
alt=""
class="aspect-square w-full rounded object-cover transition-transform group-hover:scale-[1.03]"
loading="lazy"
onerror={onImgError}
/>
<div class="mt-2 truncate text-sm font-medium">{album.title}</div>
{#if album.year}
<div class="text-xs text-text-secondary">{album.year}</div>
{/if}
</a>