54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { StyleSheet, View, Text, TouchableOpacity, Image } from "react-native";
|
|
import { useAuth } from "@/stores/auth";
|
|
|
|
export const GoogleLoginButton = () => {
|
|
const loginWithGoogle = useAuth((state) => state.loginWithGoogle);
|
|
const authLoading = useAuth((state) => state.loading);
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => loginWithGoogle()}
|
|
disabled={authLoading}
|
|
>
|
|
<View style={styles.contentWrapper}>
|
|
<Image
|
|
source={require("@/assets/images/google.png")}
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.text}>Continuer avec Google</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
backgroundColor: "#ffffff",
|
|
borderColor: "#747775",
|
|
borderWidth: 1,
|
|
borderRadius: 8,
|
|
height: 48,
|
|
paddingHorizontal: 12,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
alignSelf: "stretch",
|
|
},
|
|
contentWrapper: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
icon: {
|
|
height: 20,
|
|
width: 20,
|
|
marginRight: 12,
|
|
},
|
|
text: {
|
|
color: "#1f1f1f",
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
textAlign: "center",
|
|
},
|
|
});
|