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