Eugenius-Anonymous
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'gold' | 'outline' | 'ghost' | 'danger';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
fullWidth?: boolean;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ children, variant = 'primary', size = 'md', fullWidth, isLoading, className = '', disabled, ...props }, ref) => {
|
|
|
|
let btnClass = 'btn';
|
|
|
|
// Variant
|
|
if (variant === 'primary') btnClass += ' btn-primary';
|
|
else if (variant === 'gold') btnClass += ' btn-gold';
|
|
else if (variant === 'outline') btnClass += ' btn-outline';
|
|
else if (variant === 'ghost') btnClass += ' btn-ghost';
|
|
else if (variant === 'danger') btnClass += ' btn-danger';
|
|
|
|
// Size
|
|
if (size === 'sm') btnClass += ' btn-sm';
|
|
else if (size === 'lg') btnClass += ' btn-lg';
|
|
|
|
// Full width
|
|
if (fullWidth) btnClass += ' btn-full';
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={`${btnClass} ${className}`}
|
|
disabled={disabled || isLoading}
|
|
{...props}
|
|
>
|
|
{isLoading ? (
|
|
<svg className="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" strokeDasharray="30" strokeLinecap="round" opacity="0.3"></circle>
|
|
<path d="M12 2A10 10 0 0 1 22 12" stroke="currentColor" strokeWidth="4" strokeLinecap="round"></path>
|
|
</svg>
|
|
) : children}
|
|
</button>
|
|
);
|
|
}
|
|
);
|
|
|
|
Button.displayName = 'Button';
|