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 let showPopover = $state(false);
30</script>
31
32<div class="flex h-full w-full items-center justify-center p-4">
33 <PopoverEmojiPicker
34 bind:open={showPopover}
35 onpicked={(emoji) => {
36 record ??= {
37 value: {}
38 };
39
40 record.value.status = emoji.unicode;
41
42 item.cardData.hasUpdate = true;
43 item.cardData.emoji = emoji.unicode;
44
45 showPopover = false;
46 }}
47 >
48 {#snippet child({ props })}
49 {@const animated = emojiToNotoAnimatedWebp(record?.value?.status)}
50
51 <button {...props} class="z-20 h-full max-h-40 w-full max-w-40">
52 {#if animated}
53 <img
54 src={animated}
55 alt=""
56 class="hover:bg-base-500/10 h-full max-h-40 w-full max-w-40 rounded-2xl object-contain"
57 />
58 {:else if record?.value?.status}
59 <div class="text-9xl">
60 {record.value.status}
61 </div>
62 {:else}
63 <div>Click here to set a status</div>
64 {/if}
65 </button>
66 {/snippet}
67 </PopoverEmojiPicker>
68</div>