your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import { getAdditionalUserData } from '$lib/website/context';
4 import { emojiToNotoAnimatedWebp } from '.';
5
6 let { item }: { item: Item } = $props();
7
8 const data = getAdditionalUserData();
9 // svelte-ignore state_referenced_locally
10 let record = $state(data[item.cardType] as any);
11
12 // Use card-specific emoji if set, otherwise fall back to PDS data
13 let emoji = $derived(item.cardData?.emoji ?? record?.value?.status);
14 let animated = $derived(emojiToNotoAnimatedWebp(emoji));
15</script>
16
17<div class="flex h-full w-full items-center justify-center p-4">
18 {#if animated}
19 <img src={animated} alt="" class="h-full max-h-40 w-full object-contain" />
20 {:else if emoji}
21 <div class="text-9xl">
22 {emoji}
23 </div>
24 {:else}
25 No status yet
26 {/if}
27</div>