sonr/nebula/global/ui/button.templ

package ui

import "github.com/onsonr/sonr/nebula/global/styles"

templ PrimaryButton(href string, text string) {
	<div>
		<div class="btn cursor-pointer text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get={ href }>{ text }</div>
	</div>
}

templ SecondaryButton(href string, text string) {
	<div>
		<div class="btn cursor-pointer text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" hx-swap="afterend" hx-get={ href }>{ text }</div>
	</div>
}

type button struct {
	variant   styles.Variant
	hxGet     string
	hxPost    string
	hxTarget  string
	hxTrigger string
	hxSwap    string
}

type ButtonOpt func(button *button)

func PrimaryButtonStyle() ButtonOpt {
	return func(button *button) {
		button.variant = ButtonVariantPrimary
	}
}

func InfoButtonStyle() ButtonOpt {
	return func(button *button) {
		button.variant = ButtonVariantInfo
	}
}

func ErrorButtonStyle() ButtonOpt {
	return func(button *button) {
		button.variant = ButtonVariantError
	}
}

func SuccessButtonStyle() ButtonOpt {
	return func(button *button) {
		button.variant = ButtonVariantSuccess
	}
}

func WarningButtonStyle() ButtonOpt {
	return func(button *button) {
		button.variant = ButtonVariantWarning
	}
}

func GET(action string, target string) ButtonOpt {
	return func(button *button) {
		button.hxGet = action
		button.hxTarget = target
		button.hxTrigger = "click"
		button.hxSwap = "outerHTML"
	}
}

func POST(action string, target string) ButtonOpt {
	return func(button *button) {
		button.hxPost = action
		button.hxTarget = target
		button.hxTrigger = "click"
		button.hxSwap = "outerHTML"
	}
}

func Button(opts ...ButtonOpt) templ.Component {
	button := button{
		variant: ButtonVariantDefault,
	}
	for _, opt := range opts {
		opt(&button)
	}
	if button.hxGet != "" {
		return renderHxGetButton(&button, button.variant.Attributes())
	}

	if button.hxPost != "" {
		return renderHxPostButton(&button, button.variant.Attributes())
	}
	return renderButton(button.variant.Attributes())
}

templ renderButton(attrs templ.Attributes) {
	<button { attrs... }>
		{ children... }
	</button>
}

templ renderHxGetButton(c *button, attrs templ.Attributes) {
	<button hx-get={ c.hxGet } hx-push-url="true" hx-target={ c.hxTarget } hx-trigger={ c.hxTrigger } hx-swap={ c.hxSwap } { attrs... }>
		{ children... }
	</button>
}

templ renderHxPostButton(c *button, attrs templ.Attributes) {
	<button hx-post={ c.hxPost } hx-target={ c.hxTarget } hx-trigger={ c.hxTrigger } hx-swap={ c.hxSwap } { attrs... }>
		{ children... }
	</button>
}

type ButtonVariant int

const (
	ButtonVariantDefault ButtonVariant = iota
	ButtonVariantPrimary
	ButtonVariantInfo
	ButtonVariantError
	ButtonVariantSuccess
	ButtonVariantWarning
)

func (v ButtonVariant) Attributes() templ.Attributes {
	switch v {
	case ButtonVariantPrimary:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none",
			"type":  "button",
		}
	case ButtonVariantInfo:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 bg-blue-600 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-700 focus:shadow-outline focus:outline-none",
			"type":  "button",
		}
	case ButtonVariantError:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-red-600 hover:bg-red-700 focus:ring-2 focus:ring-offset-2 focus:ring-red-700 focus:shadow-outline focus:outline-none",
			"type":  "button",
		}
	case ButtonVariantSuccess:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-green-600 hover:bg-green-700 focus:ring-2 focus:ring-offset-2 focus:ring-green-700 focus:shadow-outline focus:outline-none",
			"type":  "button",
		}
	case ButtonVariantWarning:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-yellow-600 hover:bg-yellow-700 focus:ring-2 focus:ring-offset-2 focus:ring-yellow-700 focus:shadow-outline focus:outline-none",
			"type":  "button",
		}
	}
	return templ.Attributes{
		"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-200 bg-white border rounded-md text-neutral-500 hover:text-neutral-700 border-neutral-200/70 hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-200/60 focus:shadow-outline",
		"type":  "button",
	}
}

type SubtleButtonVariant int

const (
	SubtleButtonVariantDefault SubtleButtonVariant = iota
	SubtleButtonVariantInfo
	SubtleButtonVariantError
	SubtleButtonVariantSuccess
	SubtleButtonVariantWarning
)

func (v SubtleButtonVariant) Attributes() templ.Attributes {
	switch v {
	case SubtleButtonVariantInfo:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-blue-500 transition-colors duration-100 rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-blue-100 bg-blue-50 hover:text-blue-600 hover:bg-blue-100",
			"type":  "button",
		}
	case SubtleButtonVariantError:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-red-500 transition-colors duration-100 rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-red-100 bg-red-50 hover:text-red-600 hover:bg-red-100",
			"type":  "button",
		}
	case SubtleButtonVariantSuccess:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-green-500 transition-colors duration-100 rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-green-100 bg-green-50 hover:text-green-600 hover:bg-green-100",
			"type":  "button",
		}
	case SubtleButtonVariantWarning:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-yellow-600 transition-colors duration-100 rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-yellow-100 bg-yellow-50 hover:text-yellow-700 hover:bg-yellow-100",
			"type":  "button",
		}
	}
	return templ.Attributes{
		"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-100 rounded-md text-neutral-500 bg-neutral-50 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-100 hover:text-neutral-600 hover:bg-neutral-100",
		"type":  "button",
	}
}

type OutlineButtonVariant int

const (
	OutlineButtonVariantDefault OutlineButtonVariant = iota
	OutlineButtonVariantInfo
	OutlineButtonVariantError
	OutlineButtonVariantSuccess
	OutlineButtonVariantWarning
)

func (v OutlineButtonVariant) Attributes() templ.Attributes {
	switch v {
	case OutlineButtonVariantInfo:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-blue-600 transition-colors duration-100 bg-white border-2 border-blue-600 rounded-md hover:text-white hover:bg-blue-600",
			"type":  "button",
		}
	case OutlineButtonVariantError:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-red-600 transition-colors duration-100 bg-white border-2 border-red-600 rounded-md hover:text-white hover:bg-red-600",
			"type":  "button",
		}
	case OutlineButtonVariantSuccess:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-green-600 transition-colors duration-100 bg-white border-2 border-green-600 rounded-md hover:text-white hover:bg-green-600",
			"type":  "button",
		}
	case OutlineButtonVariantWarning:
		return templ.Attributes{
			"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-yellow-600 transition-colors duration-100 bg-white border-2 border-yellow-500 rounded-md hover:text-white hover:bg-yellow-500",
			"type":  "button",
		}
	}
	return templ.Attributes{
		"class": "inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-100 bg-white border-2 rounded-md text-neutral-900 hover:text-white border-neutral-900 hover:bg-neutral-900",
		"type":  "button",
	}
}