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 = /music\.apple\.com\/([a-z]{2})\/(album|playlist)\/[^/]+\/([a-zA-Z0-9.]+)/;
13 const match = item.cardData.href?.match(pattern);
14
15 if (!match) {
16 errorMessage = 'Please enter a valid Apple Music album or playlist URL';
17 return false;
18 }
19
20 item.cardData.appleMusicStorefront = match[1];
21 item.cardData.appleMusicType = match[2];
22 item.cardData.appleMusicId = match[3];
23
24 return true;
25 }
26</script>
27
28<Modal open={true} closeButton={false}>
29 <Subheading>Enter an Apple Music album or playlist URL</Subheading>
30 <Input
31 bind:value={item.cardData.href}
32 placeholder="https://music.apple.com/us/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>