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