DenozordecandClaude Sonnet 5.5
f3531c64f9
Install ReUI (MCP, skill, @reui registry, Tailwind v4, shadcn base-nova) and move the shared UI onto it: Button, Tag, Check, Input/Textarea, Segmented, Alert, Panel, Dialog, Tooltip, Menu and Select (Popover), Toast (sonner), the Table frame (DataGrid), the Dashboard KPI strip, the shnt Ops palette, Geist and the type scale. Design only: behaviour, texts and roles are unchanged. Tests that asserted the old DOM were updated; the tests now format numbers in English wherever they run. docs/reui-migration-plan.md records the plan and its decisions. Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { Alert } from './Alert'
|
|
import type { Notice } from '../lib/notice'
|
|
import styles from './Alert.module.css'
|
|
|
|
/*
|
|
The alert slot of a screen or a modal: if there is an alert, it is painted; if
|
|
not, there is nothing. And always with the same air beneath it.
|
|
|
|
It existed as a component inside Administration and ONE screen used it; the other
|
|
fifty wrote the same `{notice && (<Alert …>{notice.text}</Alert>)}` by hand. Out of
|
|
that came three different distances for the same thing, measured in the browser by
|
|
forcing a server failure:
|
|
|
|
· 24 px in Zones, its twelve modals, the lists screens, Administration, the
|
|
Dashboard, DNS Client and Apps, which wrapped the alert in a `div` with a
|
|
margin;
|
|
· 14 px in DHCP and in Logs, where the alert sat loose inside the screen's
|
|
`flex` container and kept its `gap`;
|
|
· 12 px in the four account modals, for the same reason inside the dialog.
|
|
|
|
It settles at 24, which is `--gap-block` (the token that names the distance
|
|
between independent blocks) and the one three quarters of them already had.
|
|
*/
|
|
export function Notifier({ notice, onClose }: { notice: Notice | null; onClose: () => void }) {
|
|
if (notice == null) return null
|
|
return (
|
|
<div className={styles.gap}>
|
|
<Alert type={notice.type} title={notice.title} onDismiss={onClose}>
|
|
{notice.text}
|
|
</Alert>
|
|
</div>
|
|
)
|
|
}
|