Spaces:
Sleeping
Sleeping
File size: 1,800 Bytes
e85fa50 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import React from 'react';
export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'text';
export type ButtonSize = 'small' | 'medium' | 'large';
interface ButtonProps {
children: React.ReactNode;
onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
variant?: ButtonVariant;
size?: ButtonSize;
disabled?: boolean;
fullWidth?: boolean;
className?: string;
type?: 'button' | 'submit' | 'reset';
icon?: React.ReactNode;
}
const Button: React.FC<ButtonProps> = ({
children,
onClick,
variant = 'primary',
size = 'medium',
disabled = false,
fullWidth = false,
className = '',
type = 'button',
icon
}) => {
const getVariantClass = () => {
switch (variant) {
case 'primary':
return 'ios-button-primary';
case 'secondary':
return 'ios-button-secondary';
case 'danger':
return 'ios-button-danger';
case 'text':
return 'ios-button-text';
default:
return 'ios-button-primary';
}
};
const getSizeClass = () => {
switch (size) {
case 'small':
return 'min-h-8 text-sm px-3';
case 'medium':
return 'min-h-11 text-base px-4';
case 'large':
return 'min-h-12 text-lg px-6';
default:
return 'min-h-11 text-base px-4';
}
};
return (
<button
type={type}
onClick={onClick}
disabled={disabled}
className={`
ios-button ${getVariantClass()} ${getSizeClass()}
${fullWidth ? 'w-full' : ''}
${disabled ? 'opacity-50 cursor-not-allowed' : ''}
${className}
`}
>
{icon && <span className="mr-2">{icon}</span>}
{children}
</button>
);
};
export default Button; |