Badge

package showcase

import "github.com/axzilla/templui/pkg/components"

templ BadgeVariants() {
	<div class="flex flex-wrap gap-2">
		@components.Badge(components.BadgeProps{Text: "Default"})
		@components.Badge(components.BadgeProps{Text: "Secondary", Variant: components.BadgeVariantSecondary})
		@components.Badge(components.BadgeProps{Text: "Destructive", Variant: components.BadgeVariantDestructive})
		@components.Badge(components.BadgeProps{Text: "Outline", Variant: components.BadgeVariantOutline})
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type BadgeVariant string

const (
	BadgeVariantDefault     BadgeVariant = "default"
	BadgeVariantSecondary   BadgeVariant = "secondary"
	BadgeVariantDestructive BadgeVariant = "destructive"
	BadgeVariantOutline     BadgeVariant = "outline"
)

type BadgeProps struct {
	Class      string           // Additional CSS classes
	Text       string           // Badge text content
	Variant    BadgeVariant     // Visual style variant
	IconBefore templ.Component  // Icon to display before the text
	IconAfter  templ.Component  // Icon to display after the text
	Attributes templ.Attributes // Additional HTML attributes
}

func (b BadgeProps) variantClasses() string {
	switch b.Variant {
	case BadgeVariantDestructive:
		return "border-transparent bg-destructive text-destructive-foreground"
	case BadgeVariantOutline:
		return "text-foreground border-border"
	case BadgeVariantSecondary:
		return "border-transparent bg-secondary text-secondary-foreground"
	default:
		return "border-transparent bg-primary text-primary-foreground"
	}
}

templ Badge(props BadgeProps) {
	<div
		class={
			utils.TwMerge(
				// Layout
				"inline-flex items-center gap-2",
				// Style
				"rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
				// State
				"focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
				// Variants
				props.variantClasses(),
				// Custom
				props.Class,
			),
		}
		{ props.Attributes... }
	>
		if props.IconBefore != nil {
			@props.IconBefore
		}
		{ props.Text }
		if props.IconAfter != nil {
			@props.IconAfter
		}
	</div>
}