your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { getDidContext } from '$lib/website/context';
3 import { getImageBlobUrl } from '$lib/atproto';
4 import type { ContentComponentProps } from '../types';
5
6 let { item = $bindable() }: ContentComponentProps = $props();
7
8 const did = getDidContext();
9
10 function getSrc() {
11 if (item.cardData.objectUrl) return item.cardData.objectUrl;
12
13 if (item.cardData.image && typeof item.cardData.image === 'object') {
14 return getImageBlobUrl({ did, blob: item.cardData.image });
15 }
16 return item.cardData.image;
17 }
18</script>
19
20{#key item.cardData.image || item.cardData.objectUrl}
21 <img
22 class={[
23 'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
24 item.cardData.href ? 'group-hover:scale-102' : ''
25 ]}
26 src={getSrc()}
27 alt=""
28 />
29{/key}
30{#if item.cardData.href}
31 <a
32 href={item.cardData.href}
33 class="absolute inset-0 h-full w-full"
34 target="_blank"
35 rel="noopener noreferrer"
36 >
37 <span class="sr-only">
38 {item.cardData.hrefText ?? 'Learn more'}
39 </span>
40
41 <div
42 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"
43 >
44 <svg
45 xmlns="http://www.w3.org/2000/svg"
46 fill="none"
47 viewBox="0 0 24 24"
48 stroke-width="2.5"
49 stroke="currentColor"
50 class="size-4"
51 >
52 <path
53 stroke-linecap="round"
54 stroke-linejoin="round"
55 d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
56 />
57 </svg>
58 </div>
59 </a>
60{/if}