Migrate from templates to Gomponents (#103)

pkg/ui/components/tabs.go

@@ -0,0 +1,56 @@
+package components
+
+import (
+	"fmt"
+
+	. "maragu.dev/gomponents"
+	. "maragu.dev/gomponents/html"
+)
+
+type Tab struct {
+	Title, Body string
+}
+
+func Tabs(heading, description string, items []Tab) Node {
+	renderTitles := func() Node {
+		g := make(Group, len(items))
+		for i, item := range items {
+			g[i] = Li(
+				Attr(":class", fmt.Sprintf("{'is-active': tab === %d}", i)),
+				Attr("@click", fmt.Sprintf("tab = %d", i)),
+				A(Text(item.Title)),
+			)
+		}
+		return g
+	}
+
+	renderBodies := func() Node {
+		g := make(Group, len(items))
+		for i, item := range items {
+			g[i] = Div(
+				Attr("x-show", fmt.Sprintf("tab == %d", i)),
+				P(Raw(" "+item.Body)),
+			)
+		}
+		return g
+	}
+
+	return Div(
+		P(
+			Class("subtitle mt-5"),
+			Text(heading),
+		),
+		P(
+			Class("mb-4"),
+			Text(description),
+		),
+		Div(
+			Attr("x-data", "{tab: 0}"),
+			Div(
+				Class("tabs"),
+				Ul(renderTitles()),
+			),
+			renderBodies(),
+		),
+	)
+}