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 url = $state('');
9 let errorMessage = $state('');
10
11 function checkUrl() {
12 errorMessage = '';
13 const match = url.match(/^https?:\/\/semble\.so\/profile\/([^/]+)\/collections\/([a-z0-9]+)$/);
14 if (!match) {
15 errorMessage = 'Please enter a valid Semble collection URL.';
16 return false;
17 }
18
19 item.cardData.handle = match[1];
20 item.cardData.collectionRkey = match[2];
21 item.cardData.href = url;
22 return true;
23 }
24</script>
25
26<Modal open={true} closeButton={false}>
27 <Subheading>Enter a Semble collection URL</Subheading>
28 <Input bind:value={url} placeholder="https://semble.so/profile/.../collections/..." />
29
30 {#if errorMessage}
31 <Alert type="error" title="Invalid URL"><span>{errorMessage}</span></Alert>
32 {/if}
33
34 <div class="mt-4 flex justify-end gap-2">
35 <Button onclick={oncancel} variant="ghost">Cancel</Button>
36 <Button
37 onclick={() => {
38 if (checkUrl()) oncreate();
39 }}
40 >
41 Create
42 </Button>
43 </div>
44</Modal>