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 import PlainTextEditor from '../utils/PlainTextEditor.svelte';
9 import { cn } from '@foxui/core';
10
11 let { item }: { item: Item } = $props();
12
13 const data = getAdditionalUserData();
14 // svelte-ignore state_referenced_locally
15 let record = $state(data[item.cardType] as any);
16
17 let did = getDidContext();
18 let handle = getHandleContext();
19
20 onMount(async () => {
21 if (!record) {
22 record = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
23 did,
24 handle
25 })) as any;
26
27 data[item.cardType] = record;
28 }
29 });
30
31 let showPopover = $state(false);
32</script>
33
34<div class="flex h-full w-full items-center justify-center p-4">
35 <PopoverEmojiPicker
36 bind:open={showPopover}
37 onpicked={(emoji) => {
38 record ??= {
39 value: {}
40 };
41
42 record.value.status = emoji.unicode;
43
44 item.cardData.hasUpdate = true;
45 item.cardData.emoji = emoji.unicode;
46
47 showPopover = false;
48 }}
49 >
50 {#snippet child({ props })}
51 {@const animated = emojiToNotoAnimatedWebp(record?.value?.status)}
52
53 <button {...props} class="z-20 h-full max-h-40 w-full max-w-40">
54 {#if animated}
55 <img
56 src={animated}
57 alt=""
58 class="hover:bg-base-500/10 h-full max-h-40 w-full max-w-40 rounded-2xl object-contain"
59 />
60 {:else if record?.value?.status}
61 <div class="text-9xl">
62 {record.value.status}
63 </div>
64 {:else}
65 <div>Click here to set a status</div>
66 {/if}
67 </button>
68 {/snippet}
69 </PopoverEmojiPicker>
70
71 <div
72 class={cn(
73 'bg-base-200/30 dark:bg-base-900/30 absolute top-2 right-2 left-2 z-30 rounded-lg p-1 backdrop-blur-md',
74 !item.cardData.title && 'hidden group-hover/card:block'
75 )}
76 >
77 <PlainTextEditor
78 class="text-base-900 dark:text-base-50 text-md line-clamp-1 font-bold"
79 key="title"
80 bind:item
81 placeholder="I'm feeling..."
82 />
83 </div>
84</div>