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 import { matcher } from './index';
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 const url = item.cardData.href?.trim();
15 if (!url) return;
16
17 const id = matcher(url);
18 if (!id) {
19 errorMessage = 'Please enter a valid YouTube URL';
20 return;
21 }
22
23 item.cardData.youtubeId = id;
24 item.cardData.poster = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
25 item.cardData.showInline = true;
26
27 item.w = 4;
28 item.mobileW = 8;
29 item.h = 3;
30 item.mobileH = 5;
31
32 oncreate?.();
33 }}
34 class="flex flex-col gap-2"
35 >
36 <Subheading>Enter a YouTube URL</Subheading>
37 <Input
38 bind:value={item.cardData.href}
39 placeholder="https://youtube.com/watch?v=..."
40 class="mt-4"
41 />
42
43 {#if errorMessage}
44 <p class="mt-2 text-sm text-red-600">{errorMessage}</p>
45 {/if}
46
47 <div class="mt-4 flex justify-end gap-2">
48 <Button onclick={oncancel} variant="ghost">Cancel</Button>
49 <Button type="submit">Create</Button>
50 </div>
51 </form>
52</Modal>