flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 let { releaseMbId, alt }: { releaseMbId?: string; alt: string } = $props();
3
4 let isLoading = $state(true);
5 let hasError = $state(false);
6</script>
7
8{#if isLoading}
9 <div class="bg-base-200 dark:bg-base-800 h-10 w-10 animate-pulse rounded-lg"></div>
10{/if}
11
12{#if hasError}
13 <div
14 class="bg-base-300 dark:bg-base-800 accent:bg-accent-700/50 flex h-10 w-10 items-center justify-center rounded-lg"
15 >
16 <svg
17 class="text-base-400 dark:text-base-600 accent:text-accent-900 h-5 w-5"
18 fill="currentColor"
19 viewBox="0 0 20 20"
20 >
21 <path
22 d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"
23 />
24 </svg>
25 </div>
26{:else}
27 <img
28 src="https://coverartarchive.org/release/{releaseMbId}/front-250"
29 {alt}
30 class="h-10 w-10 rounded-lg object-cover {isLoading && 'hidden'}"
31 onload={() => {
32 isLoading = false;
33 }}
34 onerror={() => {
35 isLoading = false;
36 hasError = true;
37 }}
38 />
39{/if}