your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import { onMount } from 'svelte';
4 import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
5 import { CardDefinitionsByType } from '..';
6 import { PopoverEmojiPicker } from '@foxui/social';
7 import { emojiToNotoAnimatedWebp } from '.';
8
9 let { item }: { item: Item } = $props();
10
11 const data = getAdditionalUserData();
12 // svelte-ignore state_referenced_locally
13 let record = $state(data[item.cardType] as any);
14
15 let did = getDidContext();
16 let handle = getHandleContext();
17
18 onMount(async () => {
19 if (!record) {
20 record = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
21 did,
22 handle
23 })) as any;
24
25 data[item.cardType] = record;
26 }
27 });
28
29 // Use card-specific emoji if set, otherwise fall back to PDS data
30 let emoji = $derived(item.cardData?.emoji ?? record?.value?.status);
31
32 let showPopover = $state(false);
33</script>
34
35<div class="flex h-full w-full items-center justify-center p-4">
36 <PopoverEmojiPicker
37 bind:open={showPopover}
38 onpicked={(picked) => {
39 item.cardData.hasUpdate = true;
40 item.cardData.emoji = picked.unicode;
41
42 showPopover = false;
43 }}
44 >
45 {#snippet child({ props })}
46 {@const animated = emojiToNotoAnimatedWebp(emoji)}
47
48 <button {...props} class="z-20 h-full max-h-40 w-full max-w-40">
49 {#if animated}
50 <img
51 src={animated}
52 alt=""
53 class="hover:bg-base-500/10 h-full max-h-40 w-full max-w-40 rounded-2xl object-contain"
54 />
55 {:else if emoji}
56 <div class="text-9xl">
57 {emoji}
58 </div>
59 {:else}
60 <div>Click here to set a status</div>
61 {/if}
62 </button>
63 {/snippet}
64 </PopoverEmojiPicker>
65</div>