49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { TouchableOpacity, Text, ActivityIndicator } from 'react-native'
|
|
|
|
interface ButtonProps {
|
|
label: string
|
|
onPress: () => void
|
|
variant?: 'primary' | 'secondary' | 'ghost'
|
|
loading?: boolean
|
|
disabled?: boolean
|
|
icon?: string
|
|
}
|
|
|
|
export function Button({
|
|
label,
|
|
onPress,
|
|
variant = 'primary',
|
|
loading,
|
|
disabled,
|
|
icon,
|
|
}: ButtonProps) {
|
|
const base = 'rounded-2xl py-4 flex-row items-center justify-center gap-2'
|
|
const variants = {
|
|
primary: `${base} bg-brand-500`,
|
|
secondary: `${base} bg-white border border-gray-200`,
|
|
ghost: `${base}`,
|
|
}
|
|
const textVariants = {
|
|
primary: 'text-white font-semibold text-base',
|
|
secondary: 'text-gray-900 font-semibold text-base',
|
|
ghost: 'text-brand-500 font-semibold text-base',
|
|
}
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
disabled={disabled || loading}
|
|
className={`${variants[variant]} ${disabled || loading ? 'opacity-50' : ''}`}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color={variant === 'primary' ? 'white' : '#E63946'} />
|
|
) : (
|
|
<>
|
|
{icon && <Text className="text-xl">{icon}</Text>}
|
|
<Text className={textVariants[variant]}>{label}</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
)
|
|
}
|