<script lang="ts">
    import Header from "$lib/header.svelte";
    import BannerTitle from "$lib/banner-title.svelte";
    // import type { DevlogPost } from "./posts";
    import { posts } from "./posts";
</script>

<Header />
<BannerTitle title="Devlog Posts" />

<main>
    {#each posts as post}
        {@render devlogPost({ imgSrc: "", title: "{post.title}" })}
        <p>{post.date}</p>
    {/each}
</main>

{#snippet devlogPost({
    imgSrc,
    title,
}: {
    imgSrc: string;
    title: string;
})}
    <div>
        <img src='{imgSrc}'>
        <p>{title}</p>
    </div>
{/snippet}