Add background base options to CardBox component and introduce simplified variants

internal/view/web/component/card_box.go

@@ -6,15 +6,23 @@ import (
 
 type CardBoxParams struct {
 	Class    string
+	BgBase   bgBase
 	Children []nodx.Node
 }
 
 // CardBox renders a card box with the given children.
 func CardBox(params CardBoxParams) nodx.Node {
+	if params.BgBase.Value == "" {
+		params.BgBase = bgBase100
+	}
+
 	return nodx.Div(
 		nodx.ClassMap{
-			"rounded-box shadow-md bg-base-100 p-4": true,
-			params.Class:                            true,
+			"rounded-box shadow-md p-4": true,
+			"bg-base-100":               params.BgBase == bgBase100,
+			"bg-base-200":               params.BgBase == bgBase200,
+			"bg-base-300":               params.BgBase == bgBase300,
+			params.Class:                true,
 		},
 		nodx.Group(params.Children...),
 	)
@@ -27,3 +35,21 @@ func CardBoxSimple(children ...nodx.Node) nodx.Node {
 		Children: children,
 	})
 }
+
+// CardBoxSimpleBgBase200 is the same as CardBox, but with a less verbose
+// api and default props. It renders a card box with the given children.
+func CardBoxSimpleBgBase200(children ...nodx.Node) nodx.Node {
+	return CardBox(CardBoxParams{
+		BgBase:   bgBase200,
+		Children: children,
+	})
+}
+
+// CardBoxSimpleBgBase300 is the same as CardBox, but with a less verbose
+// api and default props. It renders a card box with the given children.
+func CardBoxSimpleBgBase300(children ...nodx.Node) nodx.Node {
+	return CardBox(CardBoxParams{
+		BgBase:   bgBase300,
+		Children: children,
+	})
+}

internal/view/web/component/enums.go

@@ -7,6 +7,7 @@ type (
 	color            enum.Member[string]
 	dropdownPosition enum.Member[string]
 	inputType        enum.Member[string]
+	bgBase           enum.Member[string]
 )
 
 var (
@@ -34,4 +35,8 @@ var (
 	InputTypeNumber   = inputType{"number"}
 	InputTypeTel      = inputType{"tel"}
 	InputTypeUrl      = inputType{"url"}
+
+	bgBase100 = bgBase{"bg-base-100"}
+	bgBase200 = bgBase{"bg-base-200"}
+	bgBase300 = bgBase{"bg-base-300"}
 )