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(
9 item.cardData.href?.replace('https://', '').replace('http://', '') ?? ''
10 );
11
12 function updateLink() {
13 if (!linkValue.trim()) {
14 item.cardData.href = '';
15 item.cardData.domain = '';
16 }
17
18 let link = validateLink(linkValue);
19 if (!link) {
20 toast.error('Invalid link');
21 return;
22 }
23
24 item.cardData.href = link;
25 item.cardData.domain = new URL(link).hostname;
26
27 onclose?.();
28 }
29</script>
30
31<Input
32 spellcheck={false}
33 type="url"
34 bind:value={linkValue}
35 onkeydown={(event) => {
36 if (event.code === 'Enter') {
37 updateLink();
38 event.preventDefault();
39 }
40 }}
41 placeholder="Enter link"
42/>
43<Button onclick={updateLink} size="icon"
44 ><svg
45 xmlns="http://www.w3.org/2000/svg"
46 fill="none"
47 viewBox="0 0 24 24"
48 stroke-width="1.5"
49 stroke="currentColor"
50 class="size-6"
51 >
52 <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
53 </svg>
54</Button>