your personal website on atproto - mirror
blento.app
flo-bit.dev
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 parsing as URL first
19 try {
20 const parsed = new URL(input);
21 if (/^(www\.)?github\.com$/.test(parsed.hostname)) {
22 const segments = parsed.pathname.split('/').filter(Boolean);
23 if (
24 segments.length === 1 &&
25 /^[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,37}[a-zA-Z0-9])?$/.test(segments[0])
26 ) {
27 username = segments[0];
28 }
29 }
30 } catch {
31 // Not a URL, try as plain username
32 if (/^[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,37}[a-zA-Z0-9])?$/.test(input)) {
33 username = input;
34 }
35 }
36
37 if (!username) {
38 errorMessage = 'Please enter a valid GitHub username or profile URL';
39 return;
40 }
41
42 item.cardData.user = username;
43 item.cardData.href = `https://github.com/${username}`;
44
45 item.w = 6;
46 item.mobileW = 8;
47 item.h = 3;
48 item.mobileH = 6;
49
50 oncreate?.();
51 }}
52 class="flex flex-col gap-2"
53 >
54 <Subheading>Enter a GitHub username or profile URL</Subheading>
55 <Input
56 bind:value={item.cardData.href}
57 placeholder="username or https://github.com/username"
58 class="mt-4"
59 />
60
61 {#if errorMessage}
62 <p class="mt-2 text-sm text-red-600">{errorMessage}</p>
63 {/if}
64
65 <div class="mt-4 flex justify-end gap-2">
66 <Button onclick={oncancel} variant="ghost">Cancel</Button>
67 <Button type="submit">Create</Button>
68 </div>
69 </form>
70</Modal>