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:
@@ -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>
|
||||
Reference in New Issue
Block a user