Spinner

package showcase

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

templ SpinnerSizes() {
	<div class="flex flex-wrap items-end justify-center gap-8">
		@spinner.Spinner(spinner.Props{
			Size: spinner.SizeSm,
		})
		@spinner.Spinner(spinner.Props{
			Size: spinner.SizeMd,
		})
		@spinner.Spinner(spinner.Props{
			Size: spinner.SizeLg,
		})
	</div>
}

package showcase

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

templ SpinnerColors() {
	<div class="flex flex-wrap items-end justify-center gap-8">
		@spinner.Spinner(spinner.Props{
			Size:  spinner.SizeMd,
			Color: "text-red-500",
		})
		@spinner.Spinner(spinner.Props{
			Size:  spinner.SizeMd,
			Color: "text-green-500",
		})
		@spinner.Spinner(spinner.Props{
			Size:  spinner.SizeMd,
			Color: "text-blue-500",
		})
	</div>
}

package showcase

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

templ SpinnerInButton() {
	@button.Button(button.Props{
		Attributes: templ.Attributes{
			"disabled": "true",
		},
	}) {
		<div class="flex items-center gap-2">
			@spinner.Spinner(spinner.Props{
				Size:  spinner.SizeSm,
				Color: "text-primary-foreground",
			})
			<span>Loading</span>
		</div>
	}
}