99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, StyleSheet, Platform, useColorScheme, Image } from 'react-native';
|
|
import { FontAwesome } from '@expo/vector-icons';
|
|
|
|
interface SocialButtonsProps {
|
|
onGooglePress: () => void;
|
|
onFacebookPress: () => void;
|
|
onApplePress: () => void;
|
|
}
|
|
|
|
export default function SocialButtons({ onGooglePress, onFacebookPress, onApplePress }: SocialButtonsProps) {
|
|
const colorScheme = useColorScheme();
|
|
const isDark = colorScheme === 'dark';
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={[styles.divider, { color: isDark ? '#a0aec0' : '#888' }]}>Or continue with</Text>
|
|
|
|
<View style={styles.row}>
|
|
{/* Google Button */}
|
|
<TouchableOpacity
|
|
style={[styles.circleButton, { backgroundColor: 'white' }]}
|
|
onPress={onGooglePress}
|
|
>
|
|
<Image
|
|
source={require('../../assets/icons/google.png')}
|
|
style={{ width: 24, height: 24 }}
|
|
resizeMode="contain"
|
|
/>
|
|
</TouchableOpacity>
|
|
|
|
{/* Facebook Button */}
|
|
<TouchableOpacity
|
|
style={[styles.circleButton, { backgroundColor: '#1877F2', borderWidth: 0 }]}
|
|
onPress={onFacebookPress}
|
|
>
|
|
<FontAwesome name="facebook" size={24} color="white" />
|
|
</TouchableOpacity>
|
|
|
|
{/* Apple Button */}
|
|
{Platform.OS === 'ios' && (
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.circleButton,
|
|
{ backgroundColor: isDark ? 'white' : 'black', borderWidth: 0 }
|
|
]}
|
|
onPress={onApplePress}
|
|
>
|
|
<FontAwesome name="apple" size={24} color={isDark ? "black" : "white"} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginTop: 30,
|
|
width: '100%',
|
|
alignItems: 'center',
|
|
},
|
|
divider: {
|
|
textAlign: 'center',
|
|
marginBottom: 20,
|
|
fontSize: 14,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
gap: 20, // Space between buttons
|
|
},
|
|
circleButton: {
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 25,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'white',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
google: {
|
|
backgroundColor: 'white',
|
|
},
|
|
facebook: {
|
|
backgroundColor: 'white',
|
|
},
|
|
appleLight: {
|
|
backgroundColor: 'white',
|
|
},
|
|
appleDark: {
|
|
backgroundColor: '#333', // Dark background for Apple button in Dark Mode
|
|
}
|
|
});
|