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