<script>"use strict";
import { dismissToast, toasts } from "../toastStore";
import Toast from "./Toast.svelte";
</script>

{#if $toasts}
	<section class="fixed bottom-5 right-5 flex flex-col justify-start gap-3 z-50 toast-section">
		{#each $toasts as { id, ...toastProps } (id)}
			<Toast {id} on:dismiss={() => dismissToast(id)} {...toastProps} />
		{/each}
	</section>
{/if}
