Files
cally/components/pages/settings/UserSettings.tsx
Milan Paunovic 91717c699d ver bump
2024-09-28 08:59:05 +02:00

84 lines
3.1 KiB
TypeScript

import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import React, {useState} from "react";
import {Ionicons} from "@expo/vector-icons";
import {ScrollView, StyleSheet,} from "react-native";
import MyProfile from "./user_settings_views/MyProfile";
import MyGroup from "./user_settings_views/MyGroup";
const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
const [selectedView, setSelectedView] = useState<boolean>(true);
return (
<View flexG>
<ScrollView style={{paddingBottom: 20, minHeight: "100%"}}>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginL-20 marginB-35 centerV>
<Ionicons name="chevron-back" size={22} color="#979797"/>
<Text text70 color="#979797">
Return to main settings
</Text>
</View>
</TouchableOpacity>
<View marginH-20 flexG style={{minHeight: "90%"}}>
<Text text60R marginB-25>
User Management
</Text>
<View style={styles.buttonSwitch} spread row>
<TouchableOpacity
onPress={() => setSelectedView(true)}
centerV
centerH
style={
selectedView == true ? styles.btnSelected : styles.btnNot
}
>
<View>
<Text text70 color={selectedView ? "white" : "black"}>
My Profile
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => setSelectedView(false)}
centerV
centerH
style={
selectedView == false ? styles.btnSelected : styles.btnNot
}
>
<View>
<Text text70 color={!selectedView ? "white" : "black"}>
My Group
</Text>
</View>
</TouchableOpacity>
</View>
{selectedView && <MyProfile/>}
{!selectedView && <MyGroup/>}
</View>
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
buttonSwitch: {
borderRadius: 50,
width: "100%",
backgroundColor: "#ebebeb",
height: 45,
},
btnSelected: {
backgroundColor: "#05a8b6",
height: "100%",
width: "50%",
borderRadius: 50,
},
btnNot: {
height: "100%",
width: "50%",
borderRadius: 50,
},
});
export default UserSettings;