<script lang="ts">
  import { browser } from "$app/environment";

	import Card from "$lib/components/community/Card.svelte";
	import GoTop from "$lib/components/GoTop.svelte";

  export let data

  $: elementScroll = browser ? document?.getElementById('app') : undefined;
</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 card={card} />
		{/each}
		<GoTop />
	</div>
</main>