28 lines
693 B
Svelte
28 lines
693 B
Svelte
<script lang="ts">
|
|
import { flip } from 'svelte/animate';
|
|
import { fly, fade } from 'svelte/transition';
|
|
import { notificationStack } from './notification.store';
|
|
|
|
export let persistent = false;
|
|
</script>
|
|
|
|
<div class="fixed top-8 right-8 z-50 flex flex-col">
|
|
{#each $notificationStack
|
|
.slice(Math.max($notificationStack.length - 5, 0))
|
|
.reverse() as notification (notification.id)}
|
|
<div
|
|
animate:flip={{ duration: 500 }}
|
|
in:fly|global={{ duration: 150, x: 50 }}
|
|
out:fade|global={{ duration: 150 }}
|
|
class="mb-4"
|
|
>
|
|
<svelte:component
|
|
this={notification.component}
|
|
id={notification.id}
|
|
{...notification.props}
|
|
{persistent}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|