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
7 let { item }: ContentComponentProps = $props();
8
9 let isMobile = getIsMobile();
10
11 let faviconHasError = $state(false);
12
13 let did = getDidContext();
14</script>
15
16<div class="flex h-full flex-col justify-between p-4">
17 <div>
18 <div
19 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"
20 >
21 {#if item.cardData.favicon && !faviconHasError}
22 <img
23 class="size-6 rounded-lg object-cover"
24 onerror={() => (faviconHasError = true)}
25 src={item.cardData.favicon}
26 alt=""
27 />
28 {:else}
29 <svg
30 xmlns="http://www.w3.org/2000/svg"
31 fill="none"
32 viewBox="0 0 24 24"
33 stroke-width="1.5"
34 stroke="currentColor"
35 class="size-4"
36 >
37 <path
38 stroke-linecap="round"
39 stroke-linejoin="round"
40 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"
41 />
42 </svg>
43 {/if}
44 </div>
45 <div
46 class={[
47 'text-base-900 dark:text-base-50 text-lg font-bold',
48 (isMobile() && item.mobileH < 8) || (!isMobile() && item.h < 4) ? 'line-clamp-2' : ''
49 ]}
50 >
51 {item.cardData.title}
52 </div>
53 <!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
54 <div
55 class="text-accent-600 accent:text-accent-950 dark:text-accent-400 mt-2 text-xs font-semibold"
56 >
57 {item.cardData.domain}
58 </div>
59 </div>
60
61 {#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
62 <img
63 class="mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
64 src={getImage(item.cardData, did)}
65 alt=""
66 />
67 {/if}
68 {#if item.cardData.href}
69 <a
70 href={item.cardData.href}
71 class="absolute inset-0 h-full w-full"
72 target="_blank"
73 rel="noopener noreferrer"
74 >
75 <span class="sr-only">
76 {item.cardData.hrefText ?? 'Learn more'}
77 </span>
78
79 <div
80 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"
81 >
82 <svg
83 xmlns="http://www.w3.org/2000/svg"
84 fill="none"
85 viewBox="0 0 24 24"
86 stroke-width="2.5"
87 stroke="currentColor"
88 class="size-4"
89 >
90 <path
91 stroke-linecap="round"
92 stroke-linejoin="round"
93 d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
94 />
95 </svg>
96 </div>
97 </a>
98 {/if}
99</div>