Button

package showcase

import "github.com/axzilla/templui/internal/components/button"

templ ButtonPrimary() {
	@button.Button() {
		Primary
	}
}

package showcase

import "github.com/axzilla/templui/internal/components/button"

templ ButtonSecondary() {
	@button.Button(button.Props{
		Variant: button.VariantSecondary,
	}) {
		Secondary
	}
}

package showcase

import "github.com/axzilla/templui/internal/components/button"

templ ButtonDestructive() {
	@button.Button(button.Props{
		Variant: button.VariantDestructive,
	}) {
		Destructive
	}
}

package showcase

import "github.com/axzilla/templui/internal/components/button"

templ ButtonOutline() {
	@button.Button(button.Props{
		Variant: button.VariantOutline,
	}) {
		Outline
	}
}

package showcase

import "github.com/axzilla/templui/internal/components/button"

templ ButtonGhost() {
	@button.Button(button.Props{
		Variant: button.VariantGhost,
	}) {
		Ghost
	}
}

package showcase

import "github.com/axzilla/templui/internal/components/button"

templ ButtonLink() {
	@button.Button(button.Props{
		Variant: button.VariantLink,
	}) {
		Link
	}
}

package showcase

import (
	"github.com/axzilla/templui/internal/components/button"
	"github.com/axzilla/templui/internal/components/icon"
)

templ ButtonIcon() {
	@button.Button(button.Props{
		Size:    button.SizeIcon,
		Variant: button.VariantOutline,
	}) {
		@icon.ChevronRight(icon.Props{Size: 16})
	}
}

package showcase

import (
	"github.com/axzilla/templui/internal/components/button"
	"github.com/axzilla/templui/internal/components/icon"
)

templ ButtonWithIcon() {
	@button.Button(button.Props{
		Class: "flex gap-2 items-center",
	}) {
		@icon.Mail(icon.Props{Size: 16})
		Login with Email
	}
}

package showcase

import (
	"github.com/axzilla/templui/internal/components/button"
	"github.com/axzilla/templui/internal/components/spinner"
)

templ ButtonLoading() {
	@button.Button(button.Props{
		Disabled: true,
		Class:    "flex items-center gap-2",
	}) {
		@spinner.Spinner(spinner.Props{
			Size:  spinner.SizeSm,
			Color: "text-primary-foreground",
		})
		Please wait
	}
}

package showcase

import (
	"github.com/axzilla/templui/internal/components/button"
	"github.com/axzilla/templui/internal/components/spinner"
)

templ ButtonHtmxLoading() {
	<div class="flex flex-wrap items-center gap-2">
		<form
			class="flex flex-col gap-2"
			hx-post="/docs/button/htmx-loading"
			hx-trigger="submit"
			hx-indicator="#spinner"
			hx-disabled-elt="find button"
		>
			@button.Button(button.Props{
				Type:  button.TypeSubmit,
				Class: "flex items-center gap-2",
			}) {
				<span id="spinner" class="htmx-indicator hidden [&.htmx-request]:inline-flex">
					@spinner.Spinner(spinner.Props{
						Size:  spinner.SizeSm,
						Color: "text-primary-foreground",
					})
				</span>
				Submit
			}
		</form>
		<div id="toast-container"></div>
	</div>
}