pages/src/lib/lists/gallery-entry.svelte

<script lang="ts">
    export interface GalleryEntry {
        title: string;
        subtitle: string;
        fullWidth: boolean;
        img: string;
        link: string;
    }

    let {
        entries,
    }: {
        entries: GalleryEntry[];
    } = $props();
</script>

<div class="container">
    {#each entries as entry}
    {#if entry.fullWidth}
    <div class="entry-parent full-width">
        {@render galleryEntry({entry})}
    </div>
    {:else}
    <div class="entry-parent half-width">
        {@render galleryEntry({entry})}
    </div>
    {/if}
    {/each}
</div>

{#snippet galleryEntry({entry}: {entry: GalleryEntry})}
<a class="entry" href="{entry.link}">
    <img src="{entry.img}">
    <p>{entry.title}</p>
    <p>{entry.subtitle}</p>
</a>
{/snippet}

<style>
    .container {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-wrap: wrap;
        /* flex-flow: row wrap; */
        justify-content: left;
        margin: 4px;
    }

    .entry-parent {
        display: flex;
    }

    .entry {
        margin: 4px;
        padding-bottom: 20px;
        background-color: var(--color-background-highlight);
        text-decoration: none; /* removes link underline */
        transition: background-color 0.16s ease-in-out;
    }
    .entry:hover {
        background-color: var(--color-background-highlight-hover);
    }

    .entry img {
        width: 100%;
        object-fit: cover;
        max-height: 300px;
    }
    .entry p {
        margin: 0 32px;
    }
    /* gallery entry header */
    .entry p:nth-child(2) {
        font-size: 20px;
        margin-top: 12px;
        font-weight: 800;
        font-style: italic;
    }

    .half-width {
        width: 50%;
    }
    .full-width {
        width: 100%;
    }
</style>