46 lines
1.0 KiB
Svelte
46 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { notify } from "../../notifications";
|
|
import { fade } from "svelte/transition";
|
|
import type { UpNotification } from "../../notifications";
|
|
|
|
let notifications: UpNotification[] = [];
|
|
|
|
notify.on("notification", (notification) => {
|
|
notifications.push(notification);
|
|
notifications = notifications;
|
|
|
|
setTimeout(() => {
|
|
notifications.splice(
|
|
notifications.findIndex((n) => (n.id = notification.id)),
|
|
1
|
|
);
|
|
notifications = notifications;
|
|
}, 5000);
|
|
});
|
|
|
|
const icons = {
|
|
error: "x-octagon",
|
|
warning: "exclamation-triangle"
|
|
};
|
|
</script>
|
|
|
|
{#each notifications as notification (notification.id)}
|
|
<div
|
|
class="notification notification-{notification.level || 'info'}"
|
|
transition:fade
|
|
>
|
|
<sl-icon name={icons[notification.level] || "bell"} />
|
|
{notification.content}
|
|
</div>
|
|
{/each}
|
|
|
|
<style scoped lang="scss">
|
|
.notification-error {
|
|
color: var(--error);
|
|
}
|
|
|
|
.notification-warning {
|
|
color: var(--warning);
|
|
}
|
|
</style>
|