1
0
Fork 0
esix-client/src/lib/components/ImageGrid.svelte
2024-03-22 02:41:00 +01:00

27 lines
1,012 B
Svelte

<script>
import { showSearch, loading } from '$lib/stores';
import { postGridPreviewQuality, imageGridColumns } from '$lib/settings';
export let posts = [];
</script>
<div class="grid gap-3" style={`grid-template-columns: repeat(${$imageGridColumns}, minmax(0, 1fr))`}>
{#each posts as post}
<a href={`/posts/${post.id}`} class="card p-3 flex flex-col justify-end items-center" on:click={() => {
$loading = true;
$showSearch = false
}}>
<header class="card-header p-0"></header>
<section class="flex flex-col">
<img src={post[$postGridPreviewQuality].url}
loading="lazy"
alt={`Post ${post.id}`} />
<div class="bg-black px-2 py-1">
<p class="text-center text-dark-token">{post.id} {post.file.ext} {post.rating}</p>
</div>
</section>
<footer >
</footer>
</a>
{/each}
</div>