1<script lang="ts">
2 import type { AppBskyEmbeds } from '$lib/at/types';
3
4 interface Props {
5 embed: AppBskyEmbeds;
6 color?: string;
7 }
8
9 let { embed, color = 'var(--nucleus-fg)' }: Props = $props();
10
11 const embedText = $derived.by(() => {
12 switch (embed.$type) {
13 case 'app.bsky.embed.external':
14 return '🔗 has external link';
15 case 'app.bsky.embed.record':
16 return '💬 has quote';
17 case 'app.bsky.embed.images':
18 return '🖼️ has images';
19 case 'app.bsky.embed.video':
20 return '🎥 has video';
21 case 'app.bsky.embed.recordWithMedia':
22 return '📎 has quote with media';
23 default:
24 return '❓ has unknown embed';
25 }
26 });
27</script>
28
29<span
30 class="rounded-full px-2.5 py-0.5 text-xs font-medium"
31 style="
32 background: color-mix(in srgb, {color} 10%, transparent);
33 color: {color};
34 "
35>
36 {embedText}
37</span>