55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
interface Props {
|
|
variant?: "primary" | "secondary";
|
|
size?: "large" | "medium" | "small";
|
|
roundedFull?: boolean;
|
|
icon?: JSX.Element;
|
|
onlyIcon?: boolean;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const variantClasses = {
|
|
primary: "bg-[#00BED7] text-white hover:bg-[#0AB3C9]",
|
|
secondary: "bg-white hover:text-[#0D1922]",
|
|
};
|
|
|
|
const sizeClasses = {
|
|
large: "px-4 py-3 gap-2 text-base",
|
|
medium: "px-3.5 py-2.5 gap-1 text-sm",
|
|
small: "px-3 py-2.5 gap-1 text-xs",
|
|
};
|
|
|
|
function Button2({
|
|
variant = "primary",
|
|
size = "medium",
|
|
roundedFull = false,
|
|
icon,
|
|
onlyIcon = false,
|
|
children,
|
|
className,
|
|
onClick,
|
|
}: Props) {
|
|
return (
|
|
<button
|
|
className={`flex items-center justify-center transition-colors w-fit ${
|
|
variantClasses[variant]
|
|
} ${sizeClasses[size]} ${
|
|
roundedFull ? "rounded-full" : "rounded-lg"
|
|
} ${className}`}
|
|
onClick={onClick}
|
|
>
|
|
{onlyIcon ? (
|
|
icon
|
|
) : (
|
|
<>
|
|
{icon}
|
|
{children}
|
|
</>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default Button2;
|