sonr/nebula/blocks/alert.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",
	}
}