63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import { Text, Animated, Pressable } from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useRouter } from "expo-router";
|
|
|
|
import { useAuthContext } from "@/auth/AuthContext";
|
|
|
|
interface SignOutButtonProps {
|
|
textOpacity: Animated.Value;
|
|
iconTranslateX: Animated.Value;
|
|
paddingLeft: Animated.Value;
|
|
}
|
|
|
|
export const SignOutButton = ({
|
|
textOpacity,
|
|
iconTranslateX,
|
|
paddingLeft,
|
|
}: SignOutButtonProps) => {
|
|
const router = useRouter();
|
|
const { logout } = useAuthContext();
|
|
const handleSignOut = async () => {
|
|
try {
|
|
await logout();
|
|
router.replace("/sign-in");
|
|
} catch (err) {
|
|
console.error("Logout error:", err);
|
|
}
|
|
};
|
|
return (
|
|
<Animated.View
|
|
style={{
|
|
paddingLeft,
|
|
paddingRight: 4,
|
|
}}
|
|
>
|
|
<Pressable
|
|
onPress={handleSignOut}
|
|
className="flex-row items-center py-3 rounded-lg w-full justify-start"
|
|
>
|
|
<Animated.View
|
|
style={{
|
|
width: 32,
|
|
alignItems: "center",
|
|
transform: [{ translateX: iconTranslateX }],
|
|
}}
|
|
>
|
|
<Ionicons name="log-out-outline" size={32} color="white" />
|
|
</Animated.View>
|
|
<Animated.View
|
|
style={{
|
|
opacity: textOpacity,
|
|
marginLeft: 12,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<Text className="text-white" numberOfLines={1}>
|
|
Sign out
|
|
</Text>
|
|
</Animated.View>
|
|
</Pressable>
|
|
</Animated.View>
|
|
);
|
|
};
|