diff options
Diffstat (limited to 'code')
| -rw-r--r-- | code/app/src/components/notification.svelte | 38 |
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> |