your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { Button, Input, Modal, Subheading } from '@foxui/core';
3 import type { CreationModalComponentProps } from '../../types';
4 import { validateLink } from '$lib/helper';
5
6 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
7
8 let isFetchingLocation = $state(false);
9
10 let errorMessage = $state('');
11</script>
12
13<Modal open={true} closeButton={false}>
14 <form
15 onsubmit={() => {
16 if (!item.cardData.href.trim()) return;
17
18 let link = validateLink(item.cardData.href);
19 if (!link) {
20 errorMessage = 'Invalid link';
21 return;
22 }
23
24 item.cardData.href = link;
25 item.cardData.domain = new URL(link).hostname;
26 item.cardData.hasFetched = false;
27
28 oncreate?.();
29 }}
30 class="flex flex-col gap-2"
31 >
32 <Subheading>Enter a link</Subheading>
33 <Input bind:value={item.cardData.href} class="mt-4" />
34
35 {#if errorMessage}
36 <p class="mt-2 text-sm text-red-600">{errorMessage}</p>
37 {/if}
38
39 <div class="mt-4 flex justify-end gap-2">
40 <Button onclick={oncancel} variant="ghost">Cancel</Button>
41 <Button type="submit" disabled={isFetchingLocation}>Create</Button>
42 </div>
43 </form>
44</Modal>