flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { getCanEdit } from '$lib/website/context';
3 import type { ContentComponentProps } from '../../types';
4
5 let { item }: ContentComponentProps = $props();
6
7 let isEditing = getCanEdit();
8
9 let linkHref = $derived(item.cardData.linkHref || '');
10 let lightImageSrc = $derived(
11 (item.cardData.imageSrc || '').replace(/theme=(light|dark|neutral)/, 'theme=light')
12 );
13 let darkImageSrc = $derived(
14 (item.cardData.imageSrc || '').replace(/theme=(light|dark|neutral)/, 'theme=dark')
15 );
16</script>
17
18<a
19 href={linkHref}
20 target="_blank"
21 rel="noopener noreferrer"
22 class={[
23 'flex h-full w-full items-center justify-center p-4',
24 isEditing() && 'pointer-events-none'
25 ]}
26>
27 <img
28 src={lightImageSrc}
29 alt="Product Hunt badge"
30 class="max-h-full max-w-full object-contain dark:hidden"
31 />
32 <img
33 src={darkImageSrc}
34 alt="Product Hunt badge"
35 class="hidden max-h-full max-w-full object-contain dark:block"
36 />
37</a>