your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
3 import type { CreationModalComponentProps } from '../types';
4
5 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
6
7 let errorMessage = $state('');
8
9 async function checkUrl() {
10 errorMessage = '';
11 try {
12 new URL(item.cardData.href);
13 } catch {
14 errorMessage = 'Invalid URL!';
15 return false;
16 }
17
18 return true;
19 }
20</script>
21
22<Modal open={true} closeButton={false}>
23 <Subheading>Enter a link to embed</Subheading>
24 <Input bind:value={item.cardData.href} />
25
26 {#if errorMessage}
27 <Alert type="error" title="Failed to create embed card"><span>{errorMessage}</span></Alert>
28 {/if}
29
30 <div class="mt-4 flex justify-end gap-2">
31 <Button onclick={oncancel} variant="ghost">Cancel</Button>
32 <Button
33 onclick={async () => {
34 if (await checkUrl()) oncreate();
35 }}
36 >
37 Create</Button
38 >
39 </div>
40</Modal>