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 let animated = $derived(emojiToNotoAnimatedWebp(record?.value?.status));
13</script>
14
15<div class="flex h-full w-full items-center justify-center p-4">
16 {#if animated}
17 <img src={animated} alt="" class="h-full max-h-40 w-full object-contain" />
18 {:else if record?.value?.status}
19 <div class="text-9xl">
20 {record?.value?.status}
21 </div>
22 {:else}
23 No status yet
24 {/if}
25</div>