270 lines
8.5 KiB
TypeScript
270 lines
8.5 KiB
TypeScript
import { View, Text, StyleSheet, TouchableOpacity, Image, Alert } from "react-native";
|
|
import { useUser, useClerk } from "@clerk/clerk-expo";
|
|
import { useRouter } from "expo-router";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
import { theme } from "../../styles/theme";
|
|
import { AnimatedButton } from "../../components/AnimatedButton";
|
|
import { GradientBackground } from "../../components/GradientBackground";
|
|
|
|
export default function ProfileScreen() {
|
|
const { user } = useUser();
|
|
const { signOut } = useClerk();
|
|
const router = useRouter();
|
|
|
|
const handleSignOut = async () => {
|
|
try {
|
|
await signOut();
|
|
} catch (err) {
|
|
console.error("Error signing out:", err);
|
|
}
|
|
};
|
|
|
|
const confirmSignOut = () => {
|
|
Alert.alert(
|
|
"Sign Out",
|
|
"Are you sure you want to sign out?",
|
|
[
|
|
{ text: "Cancel", style: "cancel" },
|
|
{ text: "Sign Out", style: "destructive", onPress: handleSignOut },
|
|
]
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<GradientBackground variant="primary" style={styles.header}>
|
|
<View style={styles.profileCard}>
|
|
<View style={styles.avatarContainer}>
|
|
{user?.imageUrl ? (
|
|
<Image source={{ uri: user.imageUrl }} style={styles.avatar} />
|
|
) : (
|
|
<View style={styles.placeholderAvatar}>
|
|
<Ionicons name="person" size={40} color="#fff" />
|
|
</View>
|
|
)}
|
|
<View style={styles.editBadge}>
|
|
<Ionicons name="pencil" size={12} color={theme.colors.primary} />
|
|
</View>
|
|
</View>
|
|
<Text style={styles.name}>{user?.fullName || "User"}</Text>
|
|
<Text style={styles.email}>{user?.primaryEmailAddress?.emailAddress}</Text>
|
|
<View style={styles.memberBadge}>
|
|
<Text style={styles.memberText}>Premium Member</Text>
|
|
</View>
|
|
</View>
|
|
</GradientBackground>
|
|
|
|
<View style={styles.content}>
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Account</Text>
|
|
<View style={[styles.infoCard, theme.shadows.subtle]}>
|
|
<TouchableOpacity style={styles.infoRow} onPress={() => router.push('/personal-details')}>
|
|
<LinearGradient
|
|
colors={['rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.05)']}
|
|
style={styles.iconContainer}
|
|
>
|
|
<Ionicons name="person-outline" size={20} color={theme.colors.primary} />
|
|
</LinearGradient>
|
|
<Text style={styles.infoLabel}>Personal Details</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
|
|
</TouchableOpacity>
|
|
<View style={styles.divider} />
|
|
<TouchableOpacity style={styles.infoRow} onPress={() => router.push('/fitness-profile')}>
|
|
<LinearGradient
|
|
colors={['rgba(16, 185, 129, 0.1)', 'rgba(16, 185, 129, 0.05)']}
|
|
style={styles.iconContainer}
|
|
>
|
|
<Ionicons name="fitness-outline" size={20} color={theme.colors.success} />
|
|
</LinearGradient>
|
|
<Text style={styles.infoLabel}>Fitness Profile</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
|
|
</TouchableOpacity>
|
|
<View style={styles.divider} />
|
|
<TouchableOpacity style={styles.infoRow}>
|
|
<LinearGradient
|
|
colors={['rgba(245, 158, 11, 0.1)', 'rgba(245, 158, 11, 0.05)']}
|
|
style={styles.iconContainer}
|
|
>
|
|
<Ionicons name="notifications-outline" size={20} color={theme.colors.warning} />
|
|
</LinearGradient>
|
|
<Text style={styles.infoLabel}>Notifications</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Support</Text>
|
|
<View style={[styles.infoCard, theme.shadows.subtle]}>
|
|
<TouchableOpacity style={styles.infoRow}>
|
|
<LinearGradient
|
|
colors={['rgba(139, 92, 246, 0.1)', 'rgba(139, 92, 246, 0.05)']}
|
|
style={styles.iconContainer}
|
|
>
|
|
<Ionicons name="help-circle-outline" size={20} color={theme.colors.secondary} />
|
|
</LinearGradient>
|
|
<Text style={styles.infoLabel}>Help Center</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
|
|
</TouchableOpacity>
|
|
<View style={styles.divider} />
|
|
<TouchableOpacity style={styles.infoRow}>
|
|
<LinearGradient
|
|
colors={['rgba(107, 114, 128, 0.1)', 'rgba(107, 114, 128, 0.05)']}
|
|
style={styles.iconContainer}
|
|
>
|
|
<Ionicons name="shield-checkmark-outline" size={20} color={theme.colors.gray600} />
|
|
</LinearGradient>
|
|
<Text style={styles.infoLabel}>Privacy & Security</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={theme.colors.gray400} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<AnimatedButton
|
|
title="Sign Out"
|
|
onPress={confirmSignOut}
|
|
variant="danger"
|
|
style={styles.signOutButton}
|
|
icon={<Ionicons name="log-out-outline" size={20} color="#fff" />}
|
|
/>
|
|
|
|
<Text style={styles.version}>Version 1.0.0</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.background,
|
|
},
|
|
header: {
|
|
paddingTop: 60,
|
|
paddingBottom: 30,
|
|
borderBottomLeftRadius: theme.borderRadius.xl,
|
|
borderBottomRightRadius: theme.borderRadius.xl,
|
|
alignItems: 'center',
|
|
},
|
|
profileCard: {
|
|
alignItems: 'center',
|
|
},
|
|
avatarContainer: {
|
|
position: 'relative',
|
|
marginBottom: 16,
|
|
},
|
|
avatar: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
borderWidth: 4,
|
|
borderColor: 'rgba(255, 255, 255, 0.3)',
|
|
},
|
|
placeholderAvatar: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderWidth: 4,
|
|
borderColor: 'rgba(255, 255, 255, 0.3)',
|
|
},
|
|
editBadge: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
right: 0,
|
|
backgroundColor: theme.colors.white,
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
name: {
|
|
fontSize: theme.typography.fontSize['2xl'],
|
|
fontWeight: theme.typography.fontWeight.bold,
|
|
color: theme.colors.white,
|
|
marginBottom: 4,
|
|
},
|
|
email: {
|
|
fontSize: theme.typography.fontSize.sm,
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
marginBottom: 12,
|
|
},
|
|
memberBadge: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
borderRadius: theme.borderRadius.full,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255, 255, 255, 0.3)',
|
|
},
|
|
memberText: {
|
|
color: theme.colors.white,
|
|
fontSize: theme.typography.fontSize.xs,
|
|
fontWeight: theme.typography.fontWeight.bold,
|
|
letterSpacing: 0.5,
|
|
},
|
|
content: {
|
|
padding: 20,
|
|
marginTop: -20,
|
|
},
|
|
section: {
|
|
marginBottom: 24,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: theme.typography.fontSize.lg,
|
|
fontWeight: theme.typography.fontWeight.bold,
|
|
color: theme.colors.gray900,
|
|
marginBottom: 12,
|
|
marginLeft: 4,
|
|
},
|
|
infoCard: {
|
|
backgroundColor: theme.colors.white,
|
|
borderRadius: theme.borderRadius.xl,
|
|
padding: 8,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.gray100,
|
|
},
|
|
infoRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 12,
|
|
},
|
|
iconContainer: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 10,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: 12,
|
|
},
|
|
infoLabel: {
|
|
flex: 1,
|
|
fontSize: theme.typography.fontSize.base,
|
|
color: theme.colors.gray900,
|
|
fontWeight: theme.typography.fontWeight.medium,
|
|
},
|
|
divider: {
|
|
height: 1,
|
|
backgroundColor: theme.colors.gray100,
|
|
marginLeft: 60,
|
|
},
|
|
signOutButton: {
|
|
marginTop: 8,
|
|
},
|
|
version: {
|
|
textAlign: 'center',
|
|
marginTop: 24,
|
|
color: theme.colors.gray400,
|
|
fontSize: theme.typography.fontSize.xs,
|
|
},
|
|
});
|