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 import { detectPlatform, platformsData } from '.';
5
6 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
7
8 let errorMessage = $state('');
9
10 function handleCreate() {
11 errorMessage = '';
12
13 try {
14 new URL(item.cardData.href);
15 } catch {
16 errorMessage = 'Please enter a valid URL';
17 return;
18 }
19
20 const platform = detectPlatform(item.cardData.href);
21 if (!platform) {
22 errorMessage = 'Could not detect social media platform from URL';
23 return;
24 }
25
26 item.cardData.platform = platform;
27 item.cardData.color = platformsData[platform].hex;
28
29 oncreate();
30 }
31</script>
32
33<Modal open={true} closeButton={false}>
34 <Subheading>Enter a social media link</Subheading>
35 <Input
36 bind:value={item.cardData.href}
37 placeholder="https://instagram.com/username"
38 onkeydown={(e) => {
39 if (e.key === 'Enter') handleCreate();
40 }}
41 />
42
43 <p class="text-base-500 mt-2 text-sm">
44 Supported: Instagram, Facebook, X/Twitter, YouTube, TikTok, LinkedIn, Bluesky, Threads,
45 Snapchat, Pinterest, Twitch, Discord, GitHub, Spotify, Reddit, WhatsApp, Telegram, Mastodon
46 </p>
47
48 {#if errorMessage}
49 <Alert type="error" title="Error"><span>{errorMessage}</span></Alert>
50 {/if}
51
52 <div class="mt-4 flex justify-end gap-2">
53 <Button onclick={oncancel} variant="ghost">Cancel</Button>
54 <Button onclick={handleCreate}>Create</Button>
55 </div>
56</Modal>