button-primary.templ

package components

type ButtonProps struct {
	Id         string
	Type       string
	Text       string
	IsDisabled bool
	Name       string
	Class      string
	Href       templ.SafeURL
	OnClick    string
	// AlpineJS props:
	AClick string
	// Icon Props:
	PrefixIcon string
	SuffixIcon string
	// Loading Props:
	Loading        bool
	LoadingMessage string
	// HTMX props:
	HXPost        string
	HXGet         string
	HXTrigger     string
	HXTarget      string
	HXSwap        string
	HXIndicator   string
	XBindHXGet    string
	XBindDisabled string
}

/**
* Primary Button Component.
*
* @author: github.com/tego101 <-> x.com/tegodotdev
* @license: MIT
* =====================
* This is a button component with a primary style.
*
* Usage:
* @components.PrimaryButton(components.ButtonProps{
*	Text: "Click Me",
*	Class: "CUSTOM CLASS",
*   OnClick: "console.log('Hello World')",
* })
 */

templ PrimaryButton(props ButtonProps) {
	<button
		class={ props.Class + " overflow-clip h-10 disabled:animate-pulse flex flex-row disabled:cursor-not-allowed disabled:opacity-60 disabled:bg-slate-600 disabled:hover:bg-slate-700 inline-flex items-center justify-between px-4 py-2 lg:text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 dark:bg-[#d3d3d3] dark:hover:bg-[#f4f4f4] dark:text-black dark:hover:text-slate-900 hover:bg-neutral-900 focus:ring-0 focus:ring-offset-0 focus:ring-neutral-900 focus:shadow-outline focus:outline-none" }
		if props.Id != " " {
			id={ props.Id }
		} else {
			id={ "button-" + components.UniqueKey() }
		}
		type={ props.Type }
		name={ props.Name }
		OnClick={ props.OnClick }
		@click={ props.AClick }
		disabled?={ props.IsDisabled || props.Loading }
		if props.HXPost != "" {
			hx-post={ props.HXPost }
		}
		if props.HXGet != "" {
			hx-get={ props.HXGet }
		}
		if props.HXTrigger != "" {
			hx-trigger={ props.HXTrigger }
		}
		if props.HXTarget != "" {
			hx-target={ props.HXTarget }
		}
		if props.HXSwap != "" {
			hx-swap={ props.HXSwap }
		}
		if props.HXIndicator != "" {
			hx-indicator={ props.HXIndicator }
		}
		if props.XBindHXGet != "" {
			x-bind:hx-get={ props.XBindHXGet }
		}
		if props.XBindDisabled != "" {
			x-bind:disabled={ props.XBindDisabled }
		}
	>
		if props.PrefixIcon != "" && !props.Loading {
			@templ.Raw(props.PrefixIcon)
		}
		if props.LoadingMessage != "" {
			<span class="mx-2 font-medium">
				{ props.LoadingMessage }
			</span>
		}
		if props.Text != "" {
			<span class="flex mx-2 font-medium text-center">
				{ props.Text }
			</span>
		}
		if props.SuffixIcon != "" && !props.Loading && props.Text != "" {
			<div class="flex items-center justify-center pl-2 border-l text-slate-200 dark:text-slate-900 border-slate-800 dark:border-slate-200">
				@templ.Raw(props.SuffixIcon)
			</div>
		}
		if props.SuffixIcon != "" && !props.Loading && props.Text == "" {
			<div class="flex items-center justify-center text-slate-200 dark:text-slate-900">
				@templ.Raw(props.SuffixIcon)
			</div>
		}
		if props.Loading {
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 mx-2 animate-spin lucide lucide-loader-2"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
		}
	</button>
}