25 lines
968 B
Svelte
25 lines
968 B
Svelte
<script>
|
|
import useSettings from "$lib/useSettings.svelte.js";
|
|
import { loading } from "$lib/stores.js";
|
|
|
|
let { posts = [] } = $props();
|
|
const settings = useSettings();
|
|
</script>
|
|
|
|
<div class="grid gap-3" style={`grid-template-columns: repeat(${settings.imageGridColumns}, minmax(0, 1fr))`}>
|
|
{#each posts as post}
|
|
<a href={`/posts/${post.id}`} class="card p-3 flex flex-col justify-end items-center" onclick={() => {
|
|
loading.set(true);
|
|
}}>
|
|
<header class="card-header p-0"></header>
|
|
<section class="flex flex-col">
|
|
<img src={post[settings.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>
|
|
</a>
|
|
{/each}
|
|
</div>
|