82 lines
1.9 KiB
Svelte
82 lines
1.9 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>
|