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