pgbackweb/internal/view/web/component/change_theme_button.go

package component

import (
	lucide "github.com/eduardolat/gomponents-lucide"
	"github.com/eduardolat/pgbackweb/internal/view/web/alpine"
	"github.com/maragudk/gomponents"
	"github.com/maragudk/gomponents/html"
)

func ChangeThemeButton() gomponents.Node {
	return html.Div(
		alpine.XData(`{
			theme: "",
			
			getCurrentTheme() {
				const el = document.querySelector("html");
				const theme = el.getAttribute("data-theme");
				if (theme) {
					this.theme = theme;
					return
				}
				this.theme = "system";
			},

			init() {
				setTimeout(() => {
					this.getCurrentTheme();
				}, 200)
			}
		}`),
		alpine.XCloak(),
		alpine.XOn("click", "getCurrentTheme()"),
		alpine.XOn("click.outside", "getCurrentTheme()"),

		html.Class("dropdown dropdown-end"),
		html.Div(
			html.TabIndex("0"),
			html.Role("button"),
			html.Class("btn btn-neutral space-x-1"),

			html.Div(
				html.Class("inline-block size-4"),
				lucide.Laptop(alpine.XShow(`theme === "system"`)),
				lucide.Sun(alpine.XShow(`theme === "light"`)),
				lucide.Moon(alpine.XShow(`theme === "dark"`)),
			),

			SpanText("Theme"),
			lucide.ChevronDown(),
		),
		html.Ul(
			html.TabIndex("0"),
			html.Class(
				"dropdown-content bg-base-300 rounded z-[1] w-[150px] p-2 space-y-2 mt-2",
			),
			html.Li(
				html.Button(
					html.Data("set-theme", ""),
					html.Class("btn btn-neutral btn-block"),
					html.Type("button"),
					lucide.Laptop(html.Class("mr-1")),
					SpanText("System"),
				),
			),
			html.Li(
				html.Button(
					html.Data("set-theme", "light"),
					html.Class("btn btn-neutral btn-block"),
					html.Type("button"),
					lucide.Sun(html.Class("mr-1")),
					SpanText("Light"),
				),
			),
			html.Li(
				html.Button(
					html.Data("set-theme", "dark"),
					html.Class("btn btn-neutral btn-block"),
					html.Type("button"),
					lucide.Moon(html.Class("mr-1")),
					SpanText("Dark"),
				),
			),
		),
	)
}