58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface ButtonProps {
|
|
icon?: LucideIcon;
|
|
children: React.ReactNode;
|
|
variant?: 'primary' | 'danger' | 'success' | 'secondary';
|
|
size?: 'sm' | 'md';
|
|
onClick?: () => void;
|
|
className?: string;
|
|
iconOnly?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const Button: React.FC<ButtonProps> = ({
|
|
icon: Icon,
|
|
children,
|
|
variant = 'primary',
|
|
size = 'md',
|
|
onClick,
|
|
className = '',
|
|
iconOnly = false,
|
|
disabled = false
|
|
}) => {
|
|
const variantClasses = {
|
|
primary: 'bg-blue-600 text-white hover:bg-blue-700',
|
|
danger: 'bg-red-600 text-white hover:bg-red-700',
|
|
success: 'bg-green-600 text-white hover:bg-green-700',
|
|
secondary: 'bg-gray-600 text-white hover:bg-gray-700'
|
|
};
|
|
|
|
const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';
|
|
|
|
const sizeClasses = {
|
|
sm: 'px-2 py-1 text-xs',
|
|
md: 'px-3 py-2 text-sm'
|
|
};
|
|
|
|
const iconSizeClasses = {
|
|
sm: 'w-3 h-3',
|
|
md: 'w-4 h-4'
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={`flex items-center justify-center rounded transition-colors ${variantClasses[variant]} ${sizeClasses[size]} ${disabledClasses} ${className}`}
|
|
>
|
|
{Icon && (
|
|
<Icon className={`${iconSizeClasses[size]} ${!iconOnly ? 'mr-1' : ''} flex-shrink-0`} />
|
|
)}
|
|
{!iconOnly && <span className="flex-1 text-center">{children}</span>}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button; |