initial port of the UI kit

go/webui/badges.go

@@ -0,0 +1,71 @@
+package webui
+
+import "kjol/vdom"
+
+// Port of web/kit/Badges.tsx.
+
+const (
+	BadgeGreen   = "green"
+	BadgeRed     = "red"
+	BadgeBlue    = "blue"
+	BadgeAmber   = "amber"
+	BadgeNeutral = "neutral"
+	BadgeMuted   = "muted"
+)
+
+const badgeBase = "inline-flex items-center gap-1 text-xs font-semibold py-0.5 px-2 rounded-default whitespace-nowrap"
+
+var badgeColors = map[string]string{
+	"green":   "text-white bg-green-700",
+	"red":     "text-white bg-red-700",
+	"blue":    "text-white bg-sky-800",
+	"amber":   "text-white bg-amber-700",
+	"neutral": "text-white bg-neutral-500",
+	"muted":   "text-neutral-400 bg-transparent",
+}
+
+// BadgeProps configures Badge. When OnClick is set the badge renders as a
+// <button> (same visuals, interactive).
+type BadgeProps struct {
+	Color    string
+	Pill     bool
+	OnClick  func()
+	Disabled bool
+	Title    string
+	Class    string
+}
+
+func badgeClass(p BadgeProps) string {
+	c := badgeBase
+	if p.Pill {
+		c = cx(c, "rounded-full")
+	}
+	cc := badgeColors[p.Color]
+	if cc == "" {
+		cc = badgeColors["neutral"]
+	}
+	c = cx(c, cc)
+	if p.OnClick != nil {
+		c = cx(c, "cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border-0")
+	}
+	return cx(c, p.Class)
+}
+
+// Badge renders a small status pill (or interactive button when OnClick is set).
+func Badge(p BadgeProps, children ...*vdom.VNode) *vdom.VNode {
+	if p.OnClick != nil {
+		mods := []vdom.Mod{vdom.Attr("type", "button"), vdom.Attr("class", badgeClass(p)), vdom.On(vdom.EVENT_CLICK, p.OnClick)}
+		if p.Disabled {
+			mods = append(mods, vdom.Attr("disabled", "disabled"))
+		}
+		if p.Title != "" {
+			mods = append(mods, vdom.Attr("title", p.Title))
+		}
+		return vdom.El("button", kids(mods, children)...)
+	}
+	mods := []vdom.Mod{vdom.Attr("class", badgeClass(p))}
+	if p.Title != "" {
+		mods = append(mods, vdom.Attr("title", p.Title))
+	}
+	return vdom.El("span", kids(mods, children)...)
+}