ATProto social network
Something went wrong. Try again.
868 B · 29 lines
Svelte
at main
123456789101112131415161718192021222324252627282930<script lang="ts"> import type { ImageBlock } from '$lib/types/content-blocks';
type Props = { block: ImageBlock; class?: string; };
let { block, class: className = '' }: Props = $props();
let gridClass = $derived(block.images.length <= 1 ? '' : 'grid grid-cols-2 gap-2');</script>
<div class="{gridClass} {className}" data-testid="image-block"> {#each block.images as img, i (i)} <figure class="overflow-hidden rounded-lg max-h-[32rem] {block.images.length === 3 && i === 0 ? 'row-span-2' : ''}"> <img src={img.externalUri ?? img.image?.ref.$link} alt={img.alt} loading="lazy" class="h-full w-full object-cover" style={img.aspectRatio ? `aspect-ratio: ${img.aspectRatio.width} / ${img.aspectRatio.height}` : ''} /> {#if img.alt} <figcaption class="sr-only">{img.alt}</figcaption> {/if} </figure> {/each}</div>