65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ButtonProps {
|
|
children?: React.ReactNode;
|
|
onClick?: () => void;
|
|
variant?: 'text' | 'default' | 'primary' | 'danger';
|
|
size?: 'small' | 'default' | 'large';
|
|
className?: string;
|
|
icon?: React.ReactNode;
|
|
isDarkMode?: boolean;
|
|
disabled?: boolean;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
}
|
|
|
|
const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>> = ({
|
|
children,
|
|
onClick,
|
|
variant = 'default',
|
|
size = 'default',
|
|
className = '',
|
|
icon,
|
|
isDarkMode = false,
|
|
disabled = false,
|
|
type = 'button',
|
|
...props
|
|
}) => {
|
|
const baseClasses = `inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-none focus:ring-2 ${isDarkMode ? 'focus:ring-blue-400' : 'focus:ring-blue-500'} focus:ring-offset-2 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
|
|
|
|
const variantClasses = {
|
|
text: isDarkMode
|
|
? 'text-gray-400 hover:text-gray-200 hover:bg-gray-700/50'
|
|
: 'text-gray-600 hover:text-gray-800 hover:bg-gray-100',
|
|
default: isDarkMode
|
|
? 'bg-gray-800 border border-gray-600 text-gray-200 hover:bg-gray-700'
|
|
: 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50',
|
|
primary: isDarkMode
|
|
? 'bg-blue-600 text-white hover:bg-blue-700'
|
|
: 'bg-blue-500 text-white hover:bg-blue-600',
|
|
danger: isDarkMode
|
|
? 'bg-red-600 text-white hover:bg-red-700'
|
|
: 'bg-red-500 text-white hover:bg-red-600',
|
|
};
|
|
|
|
const sizeClasses = {
|
|
small: 'px-2 py-1 text-xs rounded-sm',
|
|
default: 'px-3 py-2 text-sm rounded-md',
|
|
large: 'px-4 py-3 text-base rounded-lg',
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
|
|
{...props}
|
|
>
|
|
{icon && <span className={children ? 'mr-1' : ''}>{icon}</span>}
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|