flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { validateLink } from '$lib/helper';
3 import type { Item } from '$lib/types';
4 import { Button, Checkbox, Input, Label, 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>
51<div class="space-x- mt-4 flex items-center">
52 <Checkbox
53 bind:checked={
54 () => Boolean(item.cardData.showBackgroundImage),
55 (val) => (item.cardData.showBackgroundImage = val)
56 }
57 id="show-bg-image"
58 aria-labelledby="show-bg-image-label"
59 variant="secondary"
60 />
61 <Label
62 id="show-bg-image-label"
63 for="show-bg-image"
64 class="ml-2 text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
65 >
66 Show background image
67 </Label>
68</div>