Files
sonr/pkg/nebula/blocks/alert.templ
T
Prad NukalaandGitHub a4dbb41202 feature/dwn database state (#18)
* refactor: move database, navigator scripts to state package

* feat: add Schema config for dwn

* test: add unit tests for InitializeDatabase

* feat: use templated index.html for the DWN frontend

* feat: introduce templ generation for templ

* chore(deps): update devbox.json to use latest packages

* chore: update devbox to use bun

* feat: introduce dwn config generation

* feat: add motr.mjs for vault management

* refactor: move front end from  to  (alert)

* feat: implement devbox integration and devbox-based process management

* feat: embed motr.mjs script for offline demo

* refactor: embed motr.mjs data in embed.go

* chore: update workflows to use actions/checkout@v4

* refactor: move process-compose.yaml to deploy directory

* refactor: remove unnecessary JSON conversion
2024-09-21 21:42:51 -04:00

68 lines
3.1 KiB
Templ

package blocks
func Alert(variant Variant, icon Icon, title, message string) templ.Component {
return alertElement(variant.Attributes(), title, message, icon.Render())
}
templ alertElement(attrs templ.Attributes, title, message string, icon templ.Component) {
<div { attrs... }>
@icon
<h5 class="mb-1 font-medium leading-none tracking-tight">{ title }</h5>
<div class="text-sm opacity-70">{ message }</div>
</div>
}
type AlertVariant int
const (
AlertVariant_Default AlertVariant = iota
AlertVariant_Info
AlertVariant_Error
AlertVariant_Success
AlertVariant_Warning
AlertVariant_Subtle_Info
AlertVariant_Subtle_Error
AlertVariant_Subtle_Success
AlertVariant_Subtle_Warning
)
func (v AlertVariant) Attributes() templ.Attributes {
switch v {
case AlertVariant_Info:
return templ.Attributes{
"class": "relative w-full rounded-lg border border-transparent bg-blue-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
}
case AlertVariant_Error:
return templ.Attributes{
"class": "relative w-full rounded-lg border border-transparent bg-red-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
}
case AlertVariant_Success:
return templ.Attributes{
"class": "relative w-full rounded-lg border border-transparent bg-green-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
}
case AlertVariant_Warning:
return templ.Attributes{
"class": "relative w-full rounded-lg border border-transparent bg-yellow-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
}
case AlertVariant_Subtle_Info:
return templ.Attributes{
"class": "relative w-full rounded-lg border border-transparent bg-blue-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-blue-600",
}
case AlertVariant_Subtle_Error:
return templ.Attributes{
"class": "relative w-full rounded-lg border border-transparent bg-red-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-red-600",
}
case AlertVariant_Subtle_Success:
return templ.Attributes{
"class": "relative w-full rounded-lg border border-transparent bg-green-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-green-600",
}
case AlertVariant_Subtle_Warning:
return templ.Attributes{
"class": "relative w-full rounded-lg border border-transparent bg-yellow-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-yellow-600",
}
}
return templ.Attributes{
"class": "relative w-full rounded-lg border bg-white p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-neutral-900",
}
}