diff options
Diffstat (limited to 'packages/web-util/src/components/Attention.tsx')
| -rw-r--r-- | packages/web-util/src/components/Attention.tsx | 6 |
1 files changed, 4 insertions, 2 deletions
diff --git a/packages/web-util/src/components/Attention.tsx b/packages/web-util/src/components/Attention.tsx index 50378e85a..4172c0c9b 100644 --- a/packages/web-util/src/components/Attention.tsx +++ b/packages/web-util/src/components/Attention.tsx @@ -9,10 +9,11 @@ interface Props { timeout?: Duration, } export function Attention({ type = "info", title, children, onClose, timeout = Duration.getForever() }: Props): VNode { + return <div class={`group attention-${type} mt-2 shadow-lg`}> - <style>{` + {timeout.d_ms === "forever" ? undefined : <style>{` .progress { - animation: notificationTimeoutBar 3s ease-in-out; + animation: notificationTimeoutBar ${Math.round(timeout.d_ms / 1000)}s ease-in-out; animation-fill-mode:both; } @@ -21,6 +22,7 @@ export function Attention({ type = "info", title, children, onClose, timeout = D 100% { width: 100%; } } `}</style> + } <div data-timed={timeout.d_ms !== "forever"} class="rounded-md data-[timed=true]:rounded-b-none group-[.attention-info]:bg-blue-50 group-[.attention-low]:bg-gray-100 group-[.attention-warning]:bg-yellow-50 group-[.attention-danger]:bg-red-50 group-[.attention-success]:bg-green-50 p-4 shadow"> <div class="flex"> |