3 files changed, 101 insertions, 16 deletions
diff --git a/code/app/src/components/notification.svelte b/code/app/src/components/notification.svelte
index f7b172e..5b0c2f2 100644
--- a/code/app/src/components/notification.svelte
+++ b/code/app/src/components/notification.svelte
@@ -1,3 +1,7 @@
+<script context="module" lang="ts">
+    export type NotificationType = "info" | "error" | "success" | "warning" | "subtle";
+</script>
+
 <script lang="ts">
     import { Transition } from "@rgossiaux/svelte-headlessui";
     import { onDestroy } from "svelte";
@@ -6,37 +10,63 @@
     export let title: string;
     export let subtitle = "";
     export let show = false;
-    export let type: "info" | "error" | "success" | "warning" = "info";
+    export let type: NotificationType = "info";
     export let hideAfterSeconds = -1;
+    export let nonClosable = false;
 
+    $: _show = show && title.length > 0;
     let timeout;
     let iconClass = "";
     let icon = undefined;
+    let bgClass = "";
+    let ringClass = "";
 
     onDestroy(() => {
         clearTimeout(timeout);
     });
 
     $: if (hideAfterSeconds > 0) {
-        timeout = setTimeout(() => close(), hideAfterSeconds * 60);
+        timeout = setTimeout(() => close(), hideAfterSeconds * 1000);
+    } else {
+        timeout = -1;
+        show = true;
     }
+
     $: switch (type) {
         case "error":
             iconClass = "text-red-400";
+            bgClass = "bg-red-50";
+            ringClass = "ring-1 ring-red-100";
             icon = XCircleIcon;
             break;
         case "info":
             iconClass = "text-blue-400";
+            bgClass = "bg-blue-50";
+            ringClass = "ring-1 ring-blue-100";
             icon = InformationCircleIcon;
             break;
         case "success":
             iconClass = "text-green-400";
+            bgClass = "bg-green-50";
+            ringClass = "ring-1 ring-green-100";
             icon = CheckCircleIcon;
             break;
         case "warning":
             iconClass = "text-yellow-400";
+            bgClass = "bg-yellow-50";
+            ringClass = "ring-1 ring-yellow-100";
             icon = ExclamationCircleIcon;
             break;
+        case "subtle":
+            icon = undefined;
+            bgClass = "bg-white";
+            ringClass = "";
+            break;
+        default:
+            icon = undefined;
+            bgClass = "bg-white";
+            ringClass = "";
+            break;
     }
 
     function close() {
@@ -48,7 +78,7 @@
     <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
         <Transition
             class="w-full flex justify-end"
-            {show}
+            show={_show}
             enter="transform ease-out duration-300 transition"
             enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
             enterTo="translate-y-0 opacity-100 sm:translate-x-0"
@@ -56,27 +86,31 @@
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
         >
-            <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+            <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-md {bgClass} {ringClass}">
                 <div class="p-4">
                     <div class="flex items-start">
-                        <div class="flex-shrink-0">
-                            <svelte:component this={icon} class={iconClass} />
-                        </div>
+                        {#if icon}
+                            <div class="flex-shrink-0">
+                                <svelte:component this={icon} class={iconClass} />
+                            </div>
+                        {/if}
                         <div class="ml-3 w-0 flex-1 pt-0.5">
                             <p class="text-sm font-medium text-gray-900">{title}</p>
                             {#if subtitle}
                                 <p class="mt-1 text-sm text-gray-500">{subtitle}</p>
                             {/if}
                         </div>
-                        <div class="ml-4 flex flex-shrink-0">
-                            <button
-                                on:click={close}
-                                type="button"
-                                class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                            >
-                                <XMarkIcon />
-                            </button>
-                        </div>
+                        {#if !nonClosable}
+                            <div class="ml-4 flex flex-shrink-0">
+                                <button
+                                    on:click={close}
+                                    type="button"
+                                    class="inline-flex rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                                >
+                                    <XMarkIcon />
+                                </button>
+                            </div>
+                        {/if}
                     </div>
                 </div>
             </div>
diff --git a/code/app/src/routes/book/+layout.svelte b/code/app/src/routes/book/+layout.svelte
index bc40e67..385d0a6 100644
--- a/code/app/src/routes/book/+layout.svelte
+++ b/code/app/src/routes/book/+layout.svelte
@@ -10,6 +10,7 @@
         <a href="/book/toggles" class="link" class:active={$page.url.pathname.startsWith("/book/toggles")}>Toggles</a>
         <a href="/book/inputs" class="link" class:active={$page.url.pathname.startsWith("/book/inputs")}>Inputs</a>
         <a href="/book/badges" class="link" class:active={$page.url.pathname.startsWith("/book/badges")}>Badges</a>
+        <a href="/book/notifications" class="link" class:active={$page.url.pathname.startsWith("/book/notifications")}>Notifications</a>
     </nav>
     <main>
         <slot />
diff --git a/code/app/src/routes/book/notifications/+page.svelte b/code/app/src/routes/book/notifications/+page.svelte
new file mode 100644
index 0000000..1a6144d
--- /dev/null
+++ b/code/app/src/routes/book/notifications/+page.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Notification } from "$components";
+    import type { NotificationType } from "$components/notification.svelte";
+
+    let type = "info" as NotificationType;
+    let nonClosable = false;
+    let title = "Title";
+    let subtitle = "Subtitle";
+    let hideAfterSeconds = -1;
+    let timeout;
+
+    function open(newtype: NotificationType) {
+        console.log(newtype);
+        type = newtype;
+    }
+</script>
+
+<section style="display: flex;flex-direction: column; max-width:200px;gap:5px">
+    <h2>Type:</h2>
+    <select
+        on:change={(e) => {
+            //@ts-ignore
+            open(e.target.selectedOptions[0].value);
+        }}
+    >
+        <option value="info">info</option>
+        <option value="warning">warning</option>
+        <option value="error">error</option>
+        <option value="success">success</option>
+        <option value="subtle">subtle</option>
+    </select>
+    <label for="nonClosable">
+        <input type="checkbox" id="nonClosable" bind:checked={nonClosable} />
+        nonClosable
+    </label>
+    <input type="text" bind:value={title} />
+    <input type="text" bind:value={subtitle} />
+    <input type="number" bind:value={timeout} placeholder="hideAfterSeconds" />
+    <small class="text-sm justify-end">
+        <span class="link" on:click={() => (hideAfterSeconds = timeout ?? -1)}>Apply</span>
+        <span
+            class="link"
+            on:click={() => {
+                hideAfterSeconds = -1;
+                timeout = 0;
+            }}>Reset</span
+        >
+    </small>
+    <Notification {title} {subtitle} show={true} {type} {nonClosable} {hideAfterSeconds} />
+</section>