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 function checkUrl() {
10 errorMessage = '';
11
12 const pattern = /open\.spotify\.com\/(album|playlist)\/([a-zA-Z0-9]+)/;
13 const match = item.cardData.href?.match(pattern);
14
15 if (!match) {
16 errorMessage = 'Please enter a valid Spotify album or playlist URL';
17 return false;
18 }
19
20 item.cardData.spotifyType = match[1];
21 item.cardData.spotifyId = match[2];
22
23 return true;
24 }
25</script>
26
27<Modal open={true} closeButton={false}>
28 <Subheading>Enter a Spotify album or playlist URL</Subheading>
29 <Input
30 bind:value={item.cardData.href}
31 placeholder="https://open.spotify.com/album/..."
32 onkeydown={(e) => {
33 if (e.key === 'Enter' && checkUrl()) oncreate();
34 }}
35 />
36
37 {#if errorMessage}
38 <Alert type="error" title="Invalid URL"><span>{errorMessage}</span></Alert>
39 {/if}
40
41 <div class="mt-4 flex justify-end gap-2">
42 <Button onclick={oncancel} variant="ghost">Cancel</Button>
43 <Button
44 onclick={() => {
45 if (checkUrl()) oncreate();
46 }}
47 >
48 Create
49 </Button>
50 </div>
51</Modal>