initial port of the UI kit

go/webui/alerts.go

@@ -0,0 +1,41 @@
+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-white border-neutral-100",
+	"gray":   "bg-neutral-50 border-neutral-200",
+	"blue":   "bg-sky-50 border-sky-200",
+	"green":  "bg-green-50 border-green-200",
+	"red":    "bg-red-50 border-red-200",
+	"yellow": "bg-yellow-50 border-yellow-200",
+}
+
+// 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.El("h3", vdom.Attr("class", "font-semibold mb-2"), vdom.Text(header)))
+	}
+	mods = append(mods, vdom.El("p", kids([]vdom.Mod{vdom.Attr("class", "text-sm")}, children)...))
+	return vdom.El("div", mods...)
+}