44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client";
|
|
import { motion, HTMLMotionProps } from "framer-motion";
|
|
import { ReactNode } from "react";
|
|
|
|
// Extendemos de HTMLMotionProps para heredar todos los atributos nativos de un botón (incluyendo disabled)
|
|
interface ButtonProps extends HTMLMotionProps<"button"> {
|
|
children: ReactNode;
|
|
variant?: "primary" | "outline" | "ocean";
|
|
className?: string;
|
|
}
|
|
|
|
export const Button = ({
|
|
children,
|
|
variant = "primary",
|
|
className = "",
|
|
disabled,
|
|
...props
|
|
}: ButtonProps) => {
|
|
|
|
const variants = {
|
|
primary: "bg-navy text-white hover:bg-ocean disabled:bg-navy/50",
|
|
outline: "border-2 border-navy text-navy hover:bg-navy hover:text-white disabled:opacity-50",
|
|
ocean: "bg-ocean text-white hover:bg-sky disabled:bg-ocean/50",
|
|
};
|
|
|
|
return (
|
|
<motion.button
|
|
// Los botones en sistemas tipo Together AI tienen interacciones táctiles sutiles
|
|
whileHover={disabled ? {} : { scale: 1.02 }}
|
|
whileTap={disabled ? {} : { scale: 0.98 }}
|
|
disabled={disabled}
|
|
className={`
|
|
px-8 py-4 rounded-full font-bold text-[14px]
|
|
transition-all duration-300 uppercase tracking-tight
|
|
disabled:cursor-not-allowed
|
|
${variants[variant]}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</motion.button>
|
|
);
|
|
}; |