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
26 {#if item.cardData.title}
27 <div
28 class="text-base-900 dark:text-base-50 text-md bg-base-200/30 dark:bg-base-900/30 absolute top-2 right-2 left-2 z-30 line-clamp-1 rounded-lg p-1 font-bold backdrop-blur-md"
29 >
30 {item.cardData.title}
31 </div>
32 {/if}
33</div>