package blocks
type button struct {
variant 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) {
}
templ renderHxGetButton(c *button, attrs templ.Attributes) {
}
templ renderHxPostButton(c *button, attrs templ.Attributes) {
}
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",
}
}