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", } }