generated from Nicholai/astro-template
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
variant = 'primary',
|
|
className = '',
|
|
children,
|
|
...props
|
|
}) => {
|
|
const baseStyles = "inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-full px-8 py-3 text-sm tracking-wide disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-105 active:scale-95";
|
|
|
|
const variants = {
|
|
primary: "bg-brand-purple text-white hover:bg-[#3D1265] shadow-lg shadow-brand-purple/20",
|
|
secondary: "bg-brand-red text-white hover:bg-[#c4161d] shadow-lg shadow-brand-red/20",
|
|
outline: "border-2 border-brand-purple text-brand-purple hover:bg-brand-purple hover:text-white bg-transparent",
|
|
ghost: "bg-transparent text-white hover:bg-white/10"
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={`${baseStyles} ${variants[variant]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}; |