src/routes/saved-generations/+page.svelte

<script lang="ts">
	import Card from "$lib/components/community/Card.svelte";
	import GoTop from "$lib/components/GoTop.svelte";
	import GalleryViewer from "$lib/components/community/viewer/Viewer.svelte";
	import { flip } from "svelte/animate";

  export let data
</script>

<svelte:head>
	<title>My saved generations</title>
	<meta name="description" content="Svelte demo app" />
</svelte:head>

<main class="px-6 py-10 lg:px-10 lg:py-12">
	<h1 class="text-white font-semibold text-2xl">
		Saved generations ({data.total_items})
	</h1>
	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-5 mt-8 lg:mt-10">
		{#each data.cards as card (card.id)}
			<div animate:flip={{ duration: 200 }}>
				<Card {card} displayReactions={false} displayDelete={true} displayPublish={true} />
			</div>	
		{/each}
		<GoTop />
	</div>
	<GalleryViewer />
</main>