your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { validateLink } from '$lib/helper';
3 import type { Item } from '$lib/types';
4 import { Button, Input, toast } from '@foxui/core';
5
6 let { item, onclose }: { item: Item; onclose: () => void } = $props();
7
8 let linkValue = $derived(item.cardData.href.replace('https://', '').replace('http://', ''));
9
10 function updateLink() {
11 if (!linkValue.trim()) return;
12
13 let link = validateLink(linkValue);
14 if (!link) {
15 toast.error('Invalid link');
16 return;
17 }
18
19 item.cardData.href = link;
20 item.cardData.domain = new URL(link).hostname;
21 item.cardData.hasFetched = false;
22
23 onclose?.();
24 }
25</script>
26
27<Input
28 spellcheck={false}
29 type="url"
30 bind:value={linkValue}
31 onkeydown={(event) => {
32 if (event.code === 'Enter') {
33 updateLink();
34 event.preventDefault();
35 }
36 }}
37 placeholder="Enter link"
38/>
39<Button onclick={updateLink} size="icon"
40 ><svg
41 xmlns="http://www.w3.org/2000/svg"
42 fill="none"
43 viewBox="0 0 24 24"
44 stroke-width="1.5"
45 stroke="currentColor"
46 class="size-6"
47 >
48 <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
49 </svg>
50</Button>