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
6 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
7
8 let errorMessage = $state('');
9</script>
10
11<Modal open={true} closeButton={false}>
12 <form
13 onsubmit={() => {
14 let input = item.cardData.href?.trim();
15 if (!input) return;
16
17 let username: string | undefined;
18
19 try {
20 const parsed = new URL(input);
21 if (/^(www\.)?last\.fm$/.test(parsed.hostname)) {
22 const segments = parsed.pathname.split('/').filter(Boolean);
23 if (segments.length >= 2 && segments[0] === 'user') {
24 username = segments[1];
25 }
26 }
27 } catch {
28 if (/^[a-zA-Z0-9_-]{2,15}$/.test(input)) {
29 username = input;
30 }
31 }
32
33 if (!username) {
34 errorMessage = 'Please enter a valid Last.fm username or profile URL';
35 return;
36 }
37
38 item.cardData.lastfmUsername = username;
39 item.cardData.href = `https://www.last.fm/user/${username}`;
40
41 oncreate?.();
42 }}
43 class="flex flex-col gap-2"
44 >
45 <Subheading>Enter a Last.fm username or profile URL</Subheading>
46 <Input
47 bind:value={item.cardData.href}
48 placeholder="username or https://www.last.fm/user/username"
49 class="mt-4"
50 />
51
52 {#if errorMessage}
53 <p class="mt-2 text-sm text-red-600">{errorMessage}</p>
54 {/if}
55
56 <div class="mt-4 flex justify-end gap-2">
57 <Button onclick={oncancel} variant="ghost">Cancel</Button>
58 <Button type="submit">Create</Button>
59 </div>
60 </form>
61</Modal>