48 lines
2.1 KiB
Plaintext
48 lines
2.1 KiB
Plaintext
package components
|
|
|
|
type BadgeVariant string
|
|
|
|
const (
|
|
BadgeInProgress BadgeVariant = "in-progress"
|
|
BadgeDeployed BadgeVariant = "deployed"
|
|
)
|
|
|
|
type badgeConfig struct {
|
|
label string
|
|
dot string
|
|
class string
|
|
}
|
|
|
|
func badgeProps(variant BadgeVariant) badgeConfig {
|
|
switch variant {
|
|
case BadgeDeployed:
|
|
return badgeConfig{
|
|
label: "Deployed",
|
|
dot: "bg-teal-500",
|
|
class: "bg-teal-100 text-teal-700 ring-teal-600/20",
|
|
}
|
|
default: // in-progress
|
|
return badgeConfig{
|
|
label: "In Progress",
|
|
dot: "bg-violet-400",
|
|
class: "bg-violet-100 text-violet-700 ring-violet-600/20",
|
|
}
|
|
}
|
|
}
|
|
|
|
templ Badge(variant BadgeVariant) {
|
|
{{ props := badgeProps(variant) }}
|
|
<span
|
|
class={ "flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset" , props.class }
|
|
>
|
|
if props.label == "Deployed" {
|
|
<span class="size-3.5 text-teal-600">
|
|
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="0"><animate id="spinner_kIfO" begin="0;spinner_xBIM.end" attributeName="r" calcMode="spline" dur="1.2s" values="0;11" keySplines=".52,.6,.25,.99" fill="freeze"/><animate begin="0;spinner_xBIM.end" attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" fill="freeze"/></circle><circle cx="12" cy="12" r="0"><animate id="spinner_Pbsh" begin="spinner_kIfO.begin+0.2s" attributeName="r" calcMode="spline" dur="1.2s" values="0;11" keySplines=".52,.6,.25,.99" fill="freeze"/><animate begin="spinner_kIfO.begin+0.2s" attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" fill="freeze"/></circle><circle cx="12" cy="12" r="0"><animate id="spinner_xBIM" begin="spinner_kIfO.begin+0.4s" attributeName="r" calcMode="spline" dur="1.2s" values="0;11" keySplines=".52,.6,.25,.99" fill="freeze"/><animate begin="spinner_kIfO.begin+0.4s" attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" fill="freeze"/></circle></svg>
|
|
</span>
|
|
} else {
|
|
<span class={ "h-1.5 w-1.5 rounded-full animate-pulse" , props.dot }></span>
|
|
}
|
|
{ props.label }
|
|
</span>
|
|
}
|