65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { colors, fonts } from '../theme';
|
|
|
|
const gradients = {
|
|
gold: [colors.goldBright, colors.gold],
|
|
red: ['#f05a4f', colors.red],
|
|
green: ['#39c377', '#1f7a44']
|
|
};
|
|
|
|
export default function CasinoButton({ label, onPress, variant = 'gold', disabled, size = 'default' }) {
|
|
const textColor = variant === 'gold' ? '#2b1d0b' : '#f7f2e6';
|
|
const isSmall = size === 'small';
|
|
return (
|
|
<Pressable onPress={onPress} disabled={disabled} style={styles.wrapper}>
|
|
<LinearGradient
|
|
colors={gradients[variant] || gradients.gold}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={[styles.button, isSmall && styles.buttonSmall, disabled && styles.disabled]}
|
|
>
|
|
<View style={styles.inner}>
|
|
<Text style={[styles.text, isSmall && styles.textSmall, { color: textColor }]}>{label}</Text>
|
|
</View>
|
|
</LinearGradient>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
shadowColor: colors.shadow,
|
|
shadowOpacity: 0.4,
|
|
shadowRadius: 6,
|
|
shadowOffset: { width: 0, height: 4 }
|
|
},
|
|
button: {
|
|
borderRadius: 999,
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 24,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255,255,255,0.2)'
|
|
},
|
|
buttonSmall: {
|
|
paddingVertical: 9,
|
|
paddingHorizontal: 18
|
|
},
|
|
inner: {
|
|
alignItems: 'center'
|
|
},
|
|
text: {
|
|
fontSize: 16,
|
|
fontFamily: fonts.body,
|
|
letterSpacing: 1,
|
|
textTransform: 'uppercase'
|
|
},
|
|
textSmall: {
|
|
fontSize: 13,
|
|
letterSpacing: 0.7
|
|
},
|
|
disabled: {
|
|
opacity: 0.5
|
|
}
|
|
});
|