mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-02 17:31:39 +00:00
Prad NukalaandGitHub
2c1cf56e3c
* fix: update commitizen version * feat: add WASM build tags to db actions * feat: Update all actions to follow `AddAsset` for error handling * feat: remove database dependency in dwn and motr commands * feat: add basic info form to registration view * feat: implement basic browser navigation component * refactor: move database related files to middleware * fix: remove unused test command * fix: update source directory for buf-publish workflow * feat: embed dwn config data * feat: add Sync RPC to query service * refactor: rename package to for better organization * feat: add new javascript exception handling for server requests * refactor: move dwn.wasm to embed directory * refactor: move server files to a new directory * refactor: move session related code to client package * refactor: Update dwn.wasm build path * refactor: move dwn wasm build to vfs * feat: introduce config loading middleware * feat: introduce DWN config and address JSON * refactor: move dwn wasm build output to embed directory * feat: introduce config and IndexedDB model * refactor: move DWN config file generation to vfs * refactor: move config package to * feat: add Sonr.ID IPFS gateway proxy * feat: add SWT data structure * feat: update index.html to use Sonr styles and scripts * feat(dwn): remove index.html server endpoint * feat: add Navigator API for web credential management
219 lines
8.2 KiB
Templ
219 lines
8.2 KiB
Templ
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) {
|
|
<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",
|
|
}
|
|
}
|