your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import type { SettingsComponentProps } from '../types';
4 import { Input, Label } from '@foxui/core';
5
6 let { item = $bindable<Item>(), onclose }: SettingsComponentProps = $props();
7
8 function confirmUrl() {
9 let href = item.cardData.href?.trim() || '';
10 if (href && !/^https?:\/\//i.test(href) && !href.startsWith('#')) {
11 href = 'https://' + href;
12 }
13 item.cardData.href = href;
14 onclose();
15 }
16</script>
17
18<div class="flex flex-col gap-3">
19 <div class="flex flex-col gap-1">
20 <Label for="button-href" class="text-sm">Link</Label>
21 <Input
22 id="button-href"
23 bind:value={item.cardData.href}
24 placeholder="youtube.com"
25 class="mt-2 text-sm"
26 onkeydown={(event) => {
27 if (event.code === 'Enter') {
28 event.preventDefault();
29 confirmUrl();
30 }
31 }}
32 />
33 </div>
34</div>