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