88 lines
2.1 KiB
Svelte
88 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import type {
|
|
UpNotification,
|
|
UpNotificationLevel,
|
|
} from "../../notifications";
|
|
import { notify } from "../../notifications";
|
|
import { fade } from "svelte/transition";
|
|
import Icon from "../utils/Icon.svelte";
|
|
import { DEBUG, lipsum } from "../../lib/debug";
|
|
|
|
let notifications: UpNotification[] = [];
|
|
if (DEBUG.mockNotifications) {
|
|
notifications = [
|
|
{
|
|
id: "1",
|
|
level: "error",
|
|
content: `This is an error notification, ${lipsum(5)}`,
|
|
},
|
|
{
|
|
id: "2",
|
|
level: "warning",
|
|
content: `This is a warning notification, ${lipsum(5)}`,
|
|
},
|
|
{
|
|
id: "3",
|
|
level: "info",
|
|
content: `This is an info notification, ${lipsum(5)}`,
|
|
},
|
|
];
|
|
notifications = notifications.slice(0, DEBUG.mockNotifications);
|
|
if (notifications.length < DEBUG.mockNotifications) {
|
|
notifications = [
|
|
...notifications,
|
|
...Array(DEBUG.mockNotifications - notifications.length)
|
|
.fill(0)
|
|
.map(() => ({
|
|
id: Math.random().toString(),
|
|
level: ["error", "warning", "info"][
|
|
Math.floor(Math.random() * 3)
|
|
] as UpNotificationLevel,
|
|
content: lipsum(12),
|
|
})),
|
|
];
|
|
}
|
|
notifications = notifications;
|
|
}
|
|
|
|
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: "error-alt",
|
|
warning: "error",
|
|
};
|
|
</script>
|
|
|
|
{#each notifications as notification (notification.id)}
|
|
<div
|
|
class="notification notification-{notification.level || 'info'}"
|
|
transition:fade
|
|
>
|
|
<Icon name={icons[notification.level] || "bell"} />
|
|
{notification.content}
|
|
</div>
|
|
{/each}
|
|
|
|
<style lang="scss">
|
|
@use "../../styles/colors";
|
|
|
|
.notification-error {
|
|
color: colors.$red;
|
|
}
|
|
|
|
.notification-warning {
|
|
color: colors.$orange;
|
|
}
|
|
</style>
|