<script>
    export let posts = [];
    export let columns = 8;
</script>

<div class="grid gap-3" style={`grid-template-columns: repeat(${columns}, minmax(0, 1fr))`}>
    {#each posts as post}
        <a href={`/posts/${post.id}`} class="flex flex-col place-items-center place-content-end border-2 underline hover:no-underline border-blue-200">
            <div class="post-main">
                <img src={post.preview.url}
                     loading="lazy"
                     alt={`Post ${post.id}`} />
            </div>
            <div class="post-meta">
                <p class="text-blue-200">{post.id} {post.file.ext} {post.rating}</p>
            </div>
        </a>
    {/each}
</div>

<style lang="postcss"></style>