flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import type { ContentComponentProps } from '../../types';
3
4 let { item, isEditing }: ContentComponentProps = $props();
5</script>
6
7{#if item.cardData?.appleMusicType && item.cardData?.appleMusicId && item.cardData?.appleMusicStorefront}
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://embed.music.apple.com/{item.cardData.appleMusicStorefront}/{item.cardData
12 .appleMusicType}/{item.cardData.appleMusicId}"
13 sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
14 loading="lazy"
15 title="Apple Music {item.cardData.appleMusicType}"
16 ></iframe>
17 </div>
18{:else}
19 <div class="flex h-full items-center justify-center p-4 text-center opacity-50">
20 Missing Apple Music data
21 </div>
22{/if}