your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { Button, Input, Modal, Subheading, Label } from '@foxui/core';
3 import type { CreationModalComponentProps } from '../types';
4
5 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
6
7 let text = $state(item.cardData?.text || '');
8
9 function handleCreate() {
10 if (!text.trim()) return;
11 item.cardData.text = text.trim();
12 oncreate();
13 }
14</script>
15
16<Modal open={true} closeButton={false}>
17 <Subheading>Enter text for fluid effect</Subheading>
18 <div class="mt-2">
19 <Label class="mb-1 text-xs">Text</Label>
20 <Input
21 bind:value={text}
22 placeholder="Enter your text..."
23 autofocus
24 onkeydown={(e) => {
25 if (e.key === 'Enter') handleCreate();
26 }}
27 />
28 </div>
29
30 <div class="mt-4 flex justify-end gap-2">
31 <Button onclick={oncancel} variant="ghost">Cancel</Button>
32 <Button onclick={handleCreate} disabled={!text.trim()}>Create</Button>
33 </div>
34</Modal>