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