69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
import { View, Text, Switch, StyleSheet } from "react-native";
|
|
import { useSettings } from "../context/SettingsContext";
|
|
import ColorPicker from "../components/ColorPicker";
|
|
|
|
export default function SettingsScreen() {
|
|
const { settings, saveSettings } = useSettings();
|
|
|
|
const handleColorChange = (color) => {
|
|
saveSettings({ ...settings, accentColor: color });
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.header}>Settings</Text>
|
|
|
|
<View style={styles.settingItem}>
|
|
<Text>Dark Mode</Text>
|
|
<Switch
|
|
value={settings.theme === "dark"}
|
|
onValueChange={(val) =>
|
|
saveSettings({
|
|
...settings,
|
|
theme: val ? "dark" : "light",
|
|
})
|
|
}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.settingItem}>
|
|
<Text>Accent Color</Text>
|
|
<ColorPicker
|
|
selectedColor={settings.accentColor}
|
|
onColorSelect={handleColorChange}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.settingItem}>
|
|
<Text>Enable Notifications</Text>
|
|
<Switch
|
|
value={settings.notifications}
|
|
onValueChange={(val) =>
|
|
saveSettings({ ...settings, notifications: val })
|
|
}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 20,
|
|
},
|
|
header: {
|
|
fontSize: 24,
|
|
marginBottom: 20,
|
|
},
|
|
settingItem: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginVertical: 15,
|
|
padding: 10,
|
|
backgroundColor: "#f5f5f5",
|
|
borderRadius: 10,
|
|
},
|
|
});
|