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