42 lines
1.4 KiB
Go
42 lines
1.4 KiB
Go
package webui
|
|
|
|
import "kjol/vdom"
|
|
|
|
// Port of web/kit/Alerts.tsx. The TSX exports one component per color
|
|
// (AlertWhite, AlertBlue, …); here that's Alert(color, header, children).
|
|
|
|
const (
|
|
AlertWhite = "white"
|
|
AlertGray = "gray"
|
|
AlertBlue = "blue"
|
|
AlertGreen = "green"
|
|
AlertRed = "red"
|
|
AlertYellow = "yellow"
|
|
)
|
|
|
|
const alertBase = "p-4 rounded-default shadow-xs border"
|
|
|
|
var alertColors = map[string]string{
|
|
"white": "bg-surface border-line",
|
|
"gray": "bg-surface-muted border-line",
|
|
"blue": "bg-sky-50 dark:bg-sky-950 border-sky-200 dark:border-sky-900",
|
|
"green": "bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-900",
|
|
"red": "bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-900",
|
|
"yellow": "bg-yellow-50 dark:bg-yellow-950 border-yellow-200 dark:border-yellow-900",
|
|
}
|
|
|
|
// Alert renders a colored callout. header is optional (rendered as a bold title
|
|
// above the body); children form the body.
|
|
func Alert(color, header string, children ...*vdom.VNode) *vdom.VNode {
|
|
cc := alertColors[color]
|
|
if cc == "" {
|
|
cc = alertColors["white"]
|
|
}
|
|
mods := []vdom.Mod{vdom.Attr("class", cx(alertBase, cc))}
|
|
if header != "" {
|
|
mods = append(mods, vdom.H3(vdom.Attr("class", "font-semibold mb-2"), vdom.Text(header)))
|
|
}
|
|
mods = append(mods, vdom.P(kids([]vdom.Mod{vdom.Attr("class", "text-sm")}, children)...))
|
|
return vdom.Div(mods...)
|
|
}
|