148 lines
3.3 KiB
TypeScript
148 lines
3.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { StyleSheet, Text, View, TouchableOpacity, Alert } from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
import { useRouter } from "expo-router";
|
|
import { useAuth } from "@/context/auth-context";
|
|
|
|
export default function SettingsScreen() {
|
|
const router = useRouter()
|
|
const { logout } = useAuth();
|
|
const [theme, setTheme] = useState("light"); // light | dark | system
|
|
|
|
const handleLogout = () => {
|
|
Alert.alert("Logout", "Are you sure you want to logout?", [
|
|
{ text: "Cancel", style: "cancel" },
|
|
{
|
|
text: "Logout",
|
|
style: "destructive",
|
|
onPress: () => {
|
|
// TODO: clear auth state here
|
|
router.replace("/login");
|
|
logout();
|
|
},
|
|
},
|
|
]);
|
|
};
|
|
|
|
const toggleTheme = (value) => {
|
|
setTheme(value);
|
|
// TODO: persist theme (AsyncStorage / context / zustand)
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.screen} edges={["top", "bottom"]}>
|
|
<View style={styles.content}>
|
|
|
|
<Text style={styles.title}>Settings</Text>
|
|
|
|
{/* Theme Selector */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Theme</Text>
|
|
|
|
<View style={styles.row}>
|
|
<ThemeButton
|
|
label="Light"
|
|
active={theme === "light"}
|
|
onPress={() => toggleTheme("light")}
|
|
/>
|
|
<ThemeButton
|
|
label="Dark"
|
|
active={theme === "dark"}
|
|
onPress={() => toggleTheme("dark")}
|
|
/>
|
|
<ThemeButton
|
|
label="System"
|
|
active={theme === "system"}
|
|
onPress={() => toggleTheme("system")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Logout */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Account</Text>
|
|
|
|
<TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
|
|
<Text style={styles.logoutText}>Log Out</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
function ThemeButton({ label, active, onPress }) {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
style={[styles.themeButton, active && styles.themeButtonActive]}
|
|
>
|
|
<Text style={[styles.themeText, active && styles.themeTextActive]}>
|
|
{label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
screen: {
|
|
flex: 1,
|
|
backgroundColor: "#fff",
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
paddingHorizontal: 16,
|
|
paddingTop: 12,
|
|
},
|
|
title: {
|
|
fontSize: 24,
|
|
fontWeight: "bold",
|
|
marginBottom: 20,
|
|
},
|
|
|
|
section: {
|
|
marginBottom: 24,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
marginBottom: 10,
|
|
},
|
|
|
|
row: {
|
|
flexDirection: "row",
|
|
gap: 10,
|
|
},
|
|
|
|
themeButton: {
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 12,
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
borderColor: "#ccc",
|
|
},
|
|
themeButtonActive: {
|
|
backgroundColor: "#111",
|
|
borderColor: "#111",
|
|
},
|
|
themeText: {
|
|
color: "#333",
|
|
paddingHorizontal: 5,
|
|
},
|
|
themeTextActive: {
|
|
color: "#fff",
|
|
},
|
|
|
|
logoutButton: {
|
|
padding: 14,
|
|
borderRadius: 10,
|
|
backgroundColor: "#ff3b30",
|
|
alignItems: "center",
|
|
},
|
|
logoutText: {
|
|
color: "#fff",
|
|
fontWeight: "600",
|
|
},
|
|
}); |