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