<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";

  export let data
</script>

<svelte:head>
	<title>My saved generations</title>
	<meta name="description" content="LoRA Studio 🎨 is your new all-in-one generative art AI platform! Explore thousands of fun LoRA Models, share your AI-generated art and get involved with a dynamic community of creators! New models arrive every day, in direct connection with Hugging Face! 🤗" />
</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} displayReactions={false} displayDelete={true} displayPublish={true} />
		{/each}
		<GoTop />
	</div>
	<GalleryViewer />
</main>