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