diff options
| author | Joris | 2025-04-19 12:36:38 +0200 |
|---|---|---|
| committer | Joris | 2025-04-19 12:38:24 +0200 |
| commit | 632eef6424d8dc8d40c2906177892697679e7b85 (patch) | |
| tree | 48d9cd60e9e96eab810b5f7bb3c7b1fa79e0438f /frontend/ts/src/ui | |
| parent | 063d8ef9eaf874a941f4459e831057dd0a1b7ddd (diff) | |
Add ZIG server
Diffstat (limited to 'frontend/ts/src/ui')
| -rw-r--r-- | frontend/ts/src/ui/layout.ts | 34 | ||||
| -rw-r--r-- | frontend/ts/src/ui/modal.ts | 67 |
2 files changed, 101 insertions, 0 deletions
diff --git a/frontend/ts/src/ui/layout.ts b/frontend/ts/src/ui/layout.ts new file mode 100644 index 0000000..0c41223 --- /dev/null +++ b/frontend/ts/src/ui/layout.ts @@ -0,0 +1,34 @@ +import { h, Html } from 'lib/rx' +import * as icons from 'lib/icons' +import * as L from 'lib/loadable' + +export function columns(xs: Array<Html>): Html { + return h('div', { className: 'g-Columns' }, xs) +} + +export function loading(): Html { + return h('div', + { className: 'g-Loading' }, + icons.spinner() + ) +} + +export function error(message: string): Html { + return h('div', + { className: 'g-Error' }, + message + ) +} + +export function loadable<T>(loadable: L.Loadable<T>, view: (t: T) => Html): Html { + switch (loadable.key) { + case 'INIT': + return undefined + case 'LOADING': + return loading() + case 'LOADED': + return view(loadable.value) + case 'FAILURE': + return error(loadable.error) + } +} diff --git a/frontend/ts/src/ui/modal.ts b/frontend/ts/src/ui/modal.ts new file mode 100644 index 0000000..2d5e275 --- /dev/null +++ b/frontend/ts/src/ui/modal.ts @@ -0,0 +1,67 @@ +import { h, Html } from 'lib/rx' +import * as rx from 'lib/rx' + +interface Params { + header: Html + body: Html + onClose: () => void + className?: string + onmount?: (element: Element) => void + onunmount?: (element: Element) => void +} + +export function view({ header, body, onClose, className, onmount, onunmount }: Params): Html { + return rx.withState<boolean>(false, closingVar => { + const onKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') onClose() + } + + return h('div', + { className: closingVar.map(isClosing => `g-Modal ${className ?? ''} ${isClosing ? 'g-Modal--Fade' : ''}`), + onclick: onClose, + onmount: (element: Element) => { + document.addEventListener('keydown', onKeyDown) + if (onmount) onmount(element) + }, + onunmount: (element: Element) => { + document.removeEventListener('keydown', onKeyDown) + if (onunmount) onunmount(element) + } + }, + h('div', + { className: 'g-Modal__Content', + onclick: (e: Event) => e.stopPropagation() + }, + h('div', + { className: 'g-Modal__Header' }, + header, + h('button', + { className: 'g-Modal__Close', + onclick: onClose + }, + '✕' + ) + ), + h('div', + { className: 'g-Modal__Body' }, + body + ) + ) + ) + }) +} + +interface ErrorParams { + header: string + message: string + onClose: () => void +} + +export function error({ header, message, onClose }: ErrorParams): Html { + return view({ + header, + body: h('div', { className: 'g-Modal__ContentError' }, message), + onClose, + className: 'g-Modal--Danger' + }) +} |