rachit1977
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { Loader2 } from "lucide-react";
|
|
import type { ButtonHTMLAttributes } from "react";
|
|
|
|
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
variant?: "primary" | "secondary" | "ghost" | "danger";
|
|
loading?: boolean;
|
|
};
|
|
|
|
const variants = {
|
|
primary:
|
|
"bg-gradient-to-r from-brand-orange to-brand-orangeDark text-white shadow-glow hover:brightness-110",
|
|
secondary:
|
|
"border border-white/15 bg-white/10 text-white hover:bg-white/15",
|
|
ghost: "text-white/80 hover:bg-white/10 hover:text-white",
|
|
danger: "border border-red-400/30 bg-red-500/15 text-red-100 hover:bg-red-500/25"
|
|
};
|
|
|
|
export function Button({ className = "", children, variant = "primary", loading, disabled, ...props }: ButtonProps) {
|
|
return (
|
|
<button
|
|
className={`inline-flex min-h-11 items-center justify-center gap-2 rounded-2xl px-4 py-2 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60 ${variants[variant]} ${className}`}
|
|
disabled={disabled || loading}
|
|
{...props}
|
|
>
|
|
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|