65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { TouchableOpacity, Text } from 'react-native';
|
|
import { SocialButtonProps } from './socialButton.props';
|
|
import { getStyles } from './socialButton.styles';
|
|
import { useAppTheme } from '@theme';
|
|
import Svg, { Path } from 'react-native-svg';
|
|
|
|
const GoogleIcon = ({ style }: { style: any }) => (
|
|
<Svg width={24} height={24} viewBox="0 0 24 24" style={style}>
|
|
<Path
|
|
fill="#4285F4"
|
|
d="M23.745 12.27c0-.7-.06-1.4-.19-2.07H12v3.92h6.69c-.29 1.5-.14 3.01-.97 4.14v3.44h6.53c3.82-3.51 6-8.68 6-14.43z"
|
|
/>
|
|
<Path
|
|
fill="#34A853"
|
|
d="M12 24c3.24 0 5.97-1.08 7.96-2.91l-6.53-3.44c-1.8 1.25-4.13 2.02-6.53 1.99-4.8 0-8.87-3.23-10.33-7.58H.24v3.56C2.29 20.2 6.85 24 12 24z"
|
|
/>
|
|
<Path
|
|
fill="#FBBC05"
|
|
d="M1.67 11.97a14.09 14.09 0 0 1 0-4.08V4.33H.24A11.96 11.96 0 0 0 0 12c0 2.7.9 5.2 2.42 7.21l5.88-4.56c-.95-1.07-1.48-2.45-1.48-3.79c.01-.3.04-.61.09-.9z"
|
|
/>
|
|
<Path
|
|
fill="#EA4335"
|
|
d="M12 4.75c1.77-.03 3.47.63 4.72 1.84l3.5-3.5C18.01 1.05 15.19 0 12 0 6.85 0 2.29 3.8.24 8.41l6.33 4.9C8.03 8.98 12.1 4.75 12 4.75z"
|
|
/>
|
|
</Svg>
|
|
);
|
|
|
|
const AppleIcon = ({ style, color }: { style: any, color: string }) => (
|
|
<Svg width={24} height={24} viewBox="0 0 24 24" style={style}>
|
|
<Path
|
|
fill={color}
|
|
d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.82M15.97 4.17c.66-.81 1.11-1.93.99-3.06-.96.04-2.13.64-2.82 1.45-.6.7-1.13 1.84-.99 2.94.99.08 2.15-.52 2.82-1.33"
|
|
/>
|
|
</Svg>
|
|
);
|
|
|
|
export const SocialButton: React.FC<SocialButtonProps> = ({
|
|
provider,
|
|
onPress,
|
|
style,
|
|
...rest
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const isGoogle = provider === 'google';
|
|
const label = isGoogle ? 'Google' : 'Apple';
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.button, style]}
|
|
onPress={onPress}
|
|
activeOpacity={0.8}
|
|
{...rest}
|
|
>
|
|
{isGoogle ? (
|
|
<GoogleIcon style={styles.icon} />
|
|
) : (
|
|
<AppleIcon style={styles.icon} color={colors.text} />
|
|
)}
|
|
<Text style={styles.text}>{label}</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|