2 files changed, 63 insertions, 0 deletions
diff --git a/src/lib/Notification/NotificationsProvider.svelte b/src/lib/Notification/NotificationsProvider.svelte
new file mode 100644
index 00000000..964317e9
--- /dev/null
+++ b/src/lib/Notification/NotificationsProvider.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { notifications } from './store';
+  import EventNotification from './Notification.svelte';
+
+  export let zIndex = 5000;
+
+  const handleRemove = (id: string) => {
+    notifications.remove(id);
+  };
+</script>
+
+<div class="notifications-container" style="z-index: {zIndex};">
+  {#each $notifications as notification (notification.id)}
+    <EventNotification {notification} onRemove={() => handleRemove(notification.id)} />
+  {/each}
+</div>
+
+<slot />
+
+<style>
+  .notifications-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+  }
+
+  .notifications-container :global(#notification-container) {
+    pointer-events: auto;
+  }
+</style>
diff --git a/src/lib/Notification/store.ts b/src/lib/Notification/store.ts
new file mode 100644
index 00000000..0cb4cf96
--- /dev/null
+++ b/src/lib/Notification/store.ts
@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store';
+
+export interface Notification {
+  id: string;
+  heading: string;
+  description?: string;
+  duration?: number;
+}
+
+function createNotificationStore() {
+  const { subscribe, update } = writable<Notification[]>([]);
+
+  return {
+    subscribe,
+    add: (notification: Omit<Notification, 'id'>) => {
+      const id = crypto.randomUUID();
+
+      update((notifications) => [...notifications, { ...notification, id }]);
+
+      return id;
+    },
+    remove: (id: string) => {
+      update((notifications) => notifications.filter((n) => n.id !== id));
+    }
+  };
+}
+
+export const notifications = createNotificationStore();
+
+export function addNotification(notification: Omit<Notification, 'id'>) {
+  return notifications.add(notification);
+}