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