27 lines
964 B
TypeScript
27 lines
964 B
TypeScript
import { motion } from "framer-motion";
|
|
import { cn } from "../../lib/utils";
|
|
|
|
interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: "primary" | "secondary" | "danger";
|
|
loading?: boolean;
|
|
}
|
|
|
|
export function Button({ children, variant = "primary", loading, className, ...props }: Props) {
|
|
const base = "px-5 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 disabled:opacity-50";
|
|
const variants = {
|
|
primary: "bg-gradient-to-r from-accent to-accent2 text-white hover:scale-[1.02] active:scale-[0.98]",
|
|
secondary: "border border-white/20 text-white hover:bg-white/10",
|
|
danger: "border border-red-500/40 text-red-400 hover:bg-red-500/10",
|
|
};
|
|
return (
|
|
<motion.button
|
|
whileTap={{ scale: 0.97 }}
|
|
className={cn(base, variants[variant], className)}
|
|
disabled={loading || props.disabled}
|
|
{...(props as any)}
|
|
>
|
|
{loading ? "..." : children}
|
|
</motion.button>
|
|
);
|
|
}
|