add:badges

components/badge.templ

@@ -0,0 +1,47 @@
+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>
+}