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

<script lang="ts">
	import Card from "$lib/components/community/Card.svelte";
	import GoTop from "$lib/components/GoTop.svelte";

  export let data

	const handleDelete = async (id: string) => {
		const request = await fetch(`/api/community/${id}`, {
			method: "DELETE"
		});
		const { success } = await request.json();
		if (success) {
			data = {
				...data,
				cards: data.cards.filter((card: any) => card.id !== id)
			}
		}
	}
</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} displayReactions={false} onDelete={handleDelete} />
		{/each}
		<GoTop />
	</div>
</main>