diff options
author | Sebastian <sebasjm@gmail.com> | 2023-10-30 15:27:25 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-10-30 15:27:25 -0300 |
commit | 768838285c25cbb1b171f645e8efb37a3c14273a (patch) | |
tree | 3404a7ea452a357baf4ebfc6c3b400f601849744 /packages/demobank-ui/src/components | |
parent | b7ba3119c1ff0d9ae3432cf0de1ef8cf92fc193c (diff) | |
download | wallet-core-768838285c25cbb1b171f645e8efb37a3c14273a.tar.xz |
local error impl: errors shown fixed position that are wiped when moved from the view
Diffstat (limited to 'packages/demobank-ui/src/components')
-rw-r--r-- | packages/demobank-ui/src/components/Attention.tsx | 2 | ||||
-rw-r--r-- | packages/demobank-ui/src/components/ShowLocalNotification.tsx | 43 |
2 files changed, 44 insertions, 1 deletions
diff --git a/packages/demobank-ui/src/components/Attention.tsx b/packages/demobank-ui/src/components/Attention.tsx index 3313e5796..57d0a4199 100644 --- a/packages/demobank-ui/src/components/Attention.tsx +++ b/packages/demobank-ui/src/components/Attention.tsx @@ -9,7 +9,7 @@ interface Props { children?: ComponentChildren , } export function Attention({ type = "info", title, children, onClose }: Props): VNode { - return <div class={`group attention-${type} mt-2`}> + return <div class={`group attention-${type} mt-2 shadow-lg`}> <div class="rounded-md group-[.attention-info]:bg-blue-50 group-[.attention-warning]:bg-yellow-50 group-[.attention-danger]:bg-red-50 group-[.attention-success]:bg-green-50 p-4 shadow"> <div class="flex"> <div > diff --git a/packages/demobank-ui/src/components/ShowLocalNotification.tsx b/packages/demobank-ui/src/components/ShowLocalNotification.tsx new file mode 100644 index 000000000..bb62a48f0 --- /dev/null +++ b/packages/demobank-ui/src/components/ShowLocalNotification.tsx @@ -0,0 +1,43 @@ +import { Notification } from "@gnu-taler/web-util/browser"; +import { h, Fragment, VNode } from "preact"; +import { Attention } from "./Attention.js"; +import { useSettings } from "../hooks/settings.js"; + +export function ShowLocalNotification({ notification }: { notification?: Notification }): VNode { + if (!notification) return <Fragment /> + switch (notification.message.type) { + case "error": + return <div class="relative"> + <div class="fixed top-0 left-0 right-0 z-20 w-full p-4"> + <Attention type="danger" title={notification.message.title} onClose={() => { + notification.remove() + }}> + {notification.message.description && + <div class="mt-2 text-sm text-red-700"> + {notification.message.description} + </div> + } + <MaybeShowDebugInfo info={notification.message.debug} /> + </Attention> + </div> + </div> + case "info": + return <div class="relative"> + <div class="fixed top-0 left-0 right-0 z-20 w-full p-4"> + <Attention type="success" title={notification.message.title} onClose={() => { + notification.remove(); + }} /></div></div> + } +} + + +function MaybeShowDebugInfo({ info }: { info: any }): VNode { + const [settings] = useSettings() + if (settings.showDebugInfo) { + return <pre class="whitespace-break-spaces "> + {info} + </pre> + } + return <Fragment /> +} + |