feat: v1 notification complete

1 files changed, 36 insertions, 2 deletions

diff --git a/code/app/src/components/notification.svelte b/code/app/src/components/notification.svelte
index 5dbb216..f7b172e 100644
--- a/code/app/src/components/notification.svelte
+++ b/code/app/src/components/notification.svelte
@@ -1,10 +1,43 @@
 <script lang="ts">
     import { Transition } from "@rgossiaux/svelte-headlessui";
-    import { XMarkIcon, CheckCircleIcon } from "./icons";
+    import { onDestroy } from "svelte";
+    import { XMarkIcon, ExclamationCircleIcon, InformationCircleIcon, XCircleIcon, CheckCircleIcon } from "./icons";
 
     export let title: string;
     export let subtitle = "";
     export let show = false;
+    export let type: "info" | "error" | "success" | "warning" = "info";
+    export let hideAfterSeconds = -1;
+
+    let timeout;
+    let iconClass = "";
+    let icon = undefined;
+
+    onDestroy(() => {
+        clearTimeout(timeout);
+    });
+
+    $: if (hideAfterSeconds > 0) {
+        timeout = setTimeout(() => close(), hideAfterSeconds * 60);
+    }
+    $: switch (type) {
+        case "error":
+            iconClass = "text-red-400";
+            icon = XCircleIcon;
+            break;
+        case "info":
+            iconClass = "text-blue-400";
+            icon = InformationCircleIcon;
+            break;
+        case "success":
+            iconClass = "text-green-400";
+            icon = CheckCircleIcon;
+            break;
+        case "warning":
+            iconClass = "text-yellow-400";
+            icon = ExclamationCircleIcon;
+            break;
+    }
 
     function close() {
         show = false;
@@ -14,6 +47,7 @@
 <div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
     <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
         <Transition
+            class="w-full flex justify-end"
             {show}
             enter="transform ease-out duration-300 transition"
             enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
@@ -26,7 +60,7 @@
                 <div class="p-4">
                     <div class="flex items-start">
                         <div class="flex-shrink-0">
-                            <CheckCircleIcon class="text-green-400" />
+                            <svelte:component this={icon} class={iconClass} />
                         </div>
                         <div class="ml-3 w-0 flex-1 pt-0.5">
                             <p class="text-sm font-medium text-gray-900">{title}</p>