your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { browser } from '$app/environment';
3 import { getImage } from '$lib/helper';
4 import { getDidContext, getIsMobile } from '$lib/website/context';
5 import type { ContentComponentProps } from '../types';
6 import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
7
8 let { item, isEditing }: ContentComponentProps = $props();
9
10 let isMobile = getIsMobile();
11
12 let faviconHasError = $state(false);
13
14 let did = getDidContext();
15</script>
16
17<div class="flex h-full flex-col justify-between p-4">
18 <div>
19 <div
20 class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border"
21 >
22 {#if item.cardData.favicon && !faviconHasError}
23 <img
24 class="size-6 rounded-lg object-cover"
25 onerror={() => (faviconHasError = true)}
26 src={getImage(item.cardData, did, 'favicon')}
27 alt=""
28 />
29 {:else}
30 <svg
31 xmlns="http://www.w3.org/2000/svg"
32 fill="none"
33 viewBox="0 0 24 24"
34 stroke-width="1.5"
35 stroke="currentColor"
36 class="size-4"
37 >
38 <path
39 stroke-linecap="round"
40 stroke-linejoin="round"
41 d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
42 />
43 </svg>
44 {/if}
45 </div>
46 <div
47 class={[
48 'text-base-900 dark:text-base-50 text-lg font-bold',
49 (isMobile() && item.mobileH < 8) || (!isMobile() && item.h < 4) ? 'line-clamp-2' : ''
50 ]}
51 >
52 {item.cardData.title}
53 </div>
54 <!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
55 <div
56 class="text-accent-600 accent:text-accent-950 dark:text-accent-400 mt-2 text-xs font-semibold"
57 >
58 {item.cardData.domain}
59 </div>
60 </div>
61
62 {#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
63 <img
64 class="mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
65 src={getImage(item.cardData, did)}
66 alt=""
67 />
68 {/if}
69 {#if item.cardData.href && !isEditing}
70 <a
71 href={item.cardData.href}
72 class="absolute inset-0 h-full w-full"
73 target="_blank"
74 rel="noopener noreferrer"
75 use:qrOverlay={{
76 context: {
77 title: item.cardData.title
78 }
79 }}
80 >
81 <span class="sr-only">
82 {item.cardData.hrefText ?? 'Learn more'}
83 </span>
84
85 <div
86 class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
87 >
88 <svg
89 xmlns="http://www.w3.org/2000/svg"
90 fill="none"
91 viewBox="0 0 24 24"
92 stroke-width="2.5"
93 stroke="currentColor"
94 class="size-4"
95 >
96 <path
97 stroke-linecap="round"
98 stroke-linejoin="round"
99 d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
100 />
101 </svg>
102 </div>
103 </a>
104 {/if}
105</div>