your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { PostEmbedImage } from '..';
3
4 const { data }: { data: PostEmbedImage } = $props();
5</script>
6
7{#snippet imageSnippet(
8 image: {
9 alt: string;
10 thumb: string;
11 fullsize: string;
12 aspectRatio?: { width: number; height: number };
13 },
14 className?: string
15)}
16 <img
17 loading="lazy"
18 src={image.thumb}
19 alt={image.alt}
20 style={image.aspectRatio
21 ? `aspect-ratio: ${image.aspectRatio.width} / ${image.aspectRatio.height}`
22 : 'aspect-ratio: 1 / 1'}
23 class={[
24 'border-base-500/20 dark:border-base-400/20 accent:border-accent-900 max-h-[40rem] w-fit max-w-full rounded-2xl border object-contain',
25 className
26 ]}
27 />
28{/snippet}
29
30{#if data.images.length === 1}
31 {@render imageSnippet(data.images[0])}
32{:else}
33 <div class="columns-2 gap-4">
34 {#each data.images as image (image.thumb)}
35 {@render imageSnippet(image, 'mb-4')}
36 {/each}
37 </div>
38{/if}