38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { TouchableOpacity, Text, ActivityIndicator } from 'react-native';
|
|
|
|
interface ButtonProps {
|
|
label: string;
|
|
onPress: () => void;
|
|
variant?: 'primary' | 'secondary' | 'danger';
|
|
loading?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function Button({ label, onPress, variant = 'primary', loading, disabled }: ButtonProps) {
|
|
const base = 'rounded-xl py-4 px-6 items-center justify-center';
|
|
const variants = {
|
|
primary: 'bg-primary',
|
|
secondary: 'bg-secondary border border-primary',
|
|
danger: 'bg-danger',
|
|
};
|
|
const textColors = {
|
|
primary: 'text-white',
|
|
secondary: 'text-primary',
|
|
danger: 'text-white',
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
className={`${base} ${variants[variant]} ${disabled || loading ? 'opacity-50' : ''}`}
|
|
onPress={onPress}
|
|
disabled={disabled || loading}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color={variant === 'secondary' ? '#1A6B72' : 'white'} />
|
|
) : (
|
|
<Text className={`font-semibold text-base ${textColors[variant]}`}>{label}</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|