26 lines
725 B
Svelte
26 lines
725 B
Svelte
<script lang="ts">
|
|
import { toast } from '$lib/stores/toast';
|
|
import ToastNotification from './ToastNotification.svelte';
|
|
|
|
// Subscribe to the toast store using Svelte 5 reactivity
|
|
let toasts = $derived($toast);
|
|
|
|
function handleDismiss(id: string) {
|
|
toast.remove(id);
|
|
}
|
|
</script>
|
|
|
|
<!-- Toast container positioned in top-left corner -->
|
|
<div class="fixed top-4 p-2 space-y-3 pointer-events-none max-w-2xl">
|
|
{#each toasts as toastItem (toastItem.id)}
|
|
<div class="pointer-events-auto">
|
|
<ToastNotification
|
|
message={toastItem.message}
|
|
type={toastItem.type}
|
|
duration={toastItem.duration}
|
|
onDismiss={() => handleDismiss(toastItem.id)}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|