button-link.templ

package components

var baseClass = " overflow-clip h-10 disabled:animate-pulse flex flex-row disabled:cursor-not-allowed 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 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 border-none focus:ring-none focus:shadow-outline focus:outline-none"

/**
* ButtonLink Component.
*
* @author: github.com/tego101 <-> x.com/tegodotdev
* @license: MIT
* =====================
* This component renders a button styled as a link based on the provided properties.
*
* @params ButtonProps
*
* Usage:
*
* Default Button:
* @components.ButtonLink(components.ButtonProps{
*     Class: "custom-class",
*     IsDisabled: false,
*     Loading: false,
*     Id: "button-1",
*     Href: "/home",
*     Name: "homeButton",
*     OnClick: "handleClick()",
*     AClick: "vueClickHandler",
*     PrefixIcon: "<svg>...</svg>",
*     LoadingMessage: "Loading...",
*     Text: "Go to Home",
*     SuffixIcon: "<svg>...</svg>",
* })
 */

templ ButtonLink(props ButtonProps) {
	<a
		if (props.IsDisabled) {
			class={ props.Class + " opacity-40 cursor-not-allowed" + baseClass }
		}
		else
		if (props.Loading) {
			class={ props.Class + " opacity-40 cursor-progress animate-pulse" + baseClass }
		}
		else
		if (props.IsDisabled) && (props.Loading) {
			class={ props.Class + " opacity-40 cursor-progress animate-pulse" + baseClass }
		} else {
			class={ props.Class + baseClass }
		}
		if props.Id != " " {
			id={ props.Id }
		} else {
			id={ "counter-" + components.UniqueKey() }
		}
		if props.Href != "" && props.Loading == false && props.IsDisabled == false {
			href={ props.Href }
		} else {
			href={ "#" }
		}
		name={ props.Name }
		if props.OnClick != "" {
			OnClick={ props.OnClick }
		}
		if props.AClick != "" {
			@click={ props.AClick }
		}
	>
		if props.PrefixIcon != "" && props.Loading == false {
			@templ.Raw(props.PrefixIcon)
		}
		if props.LoadingMessage != "" {
			<span class="mx-2 font-medium">
				{ props.LoadingMessage }
			</span>
		} else {
			<span class="flex flex-1 mx-2 font-medium text-slate-100">
				{ props.Text }
			</span>
		}
		if props.SuffixIcon != "" && props.Loading == false {
			<div class="min-w-[4rem] text-slate-200 border-l border-slate-800 dark:border-slate-900 flex justify-center items-center">
				@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>
		}
	</a>
}