29 lines
1.0 KiB
Svelte
29 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { toastStore } from "$lib/stores/toast.svelte";
|
|
</script>
|
|
|
|
{#each toastStore.notifications as notification (notification.id)}
|
|
<div
|
|
class="fixed bottom-8 left-1/2 -translate-x-1/2 z-[200] px-6 py-4 rounded-lg shadow-lg
|
|
font-[family-name:var(--kv-font-button)] text-lg uppercase
|
|
{notification.type === 'error'
|
|
? 'bg-red-600 text-kv-white'
|
|
: notification.type === 'success'
|
|
? 'bg-green-600 text-kv-white'
|
|
: 'bg-blue-600 text-kv-white'}"
|
|
role="alert"
|
|
style="bottom: calc(2rem + {toastStore.notifications.indexOf(notification) * 4}rem)"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span>{notification.message}</span>
|
|
<button
|
|
onclick={() => toastStore.dismiss(notification.id)}
|
|
class="ml-2 opacity-70 hover:opacity-100"
|
|
aria-label="Dismiss"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/each}
|