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