your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { ContentComponentProps } from '../types';
3
4 let { item, isEditing }: ContentComponentProps = $props();
5</script>
6
7{#if item.cardData?.spotifyType && item.cardData?.spotifyId}
8 <div class="absolute inset-0 p-2">
9 <iframe
10 class={['h-full w-full rounded-2xl', isEditing && 'pointer-events-none']}
11 src="https://open.spotify.com/embed/{item.cardData.spotifyType}/{item.cardData
12 .spotifyId}?utm_source=generator&theme=0"
13 frameborder="0"
14 allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
15 loading="lazy"
16 title="Spotify {item.cardData.spotifyType}"
17 ></iframe>
18 </div>
19{:else}
20 <div class="flex h-full items-center justify-center p-4 text-center opacity-50">
21 Missing Spotify data
22 </div>
23{/if}