keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

added dropdown,user icon and user status

Browse source
This commit is contained in:
AngelV3rgs 2023-07-17 11:58:12 +08:00
parent 596f1c3ebb
commit caaf113777
3 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/DrawerSettings/CustomDrawerContent.tsx
View file

@ -16,6 +16,7 @@ import { RootState } from "../../features/redux/Store/Store";
import LogoutIcon from "../../icons/LogoutIcon/LogoutIcon"; import LogoutIcon from "../../icons/LogoutIcon/LogoutIcon";
import { clear } from "../../features/redux/slices/AuthSlice/AuthSlice"; import { clear } from "../../features/redux/slices/AuthSlice/AuthSlice";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import UserIcon from "../../icons/UserIcon/UserIcon";
export default function CustomDrawerContent(props: {}) { export default function CustomDrawerContent(props: {}) {
const navigation = useNavigation<RootDrawerParamList>(); const navigation = useNavigation<RootDrawerParamList>();
@ -103,7 +104,7 @@ export default function CustomDrawerContent(props: {}) {
navigation.navigate("UserInfo"); navigation.navigate("UserInfo");
}} }}
> >
<HomeIcon size={32} /> <UserIcon size={32} />
<Text style={styles.text_white_medium}>UserInfo</Text> <Text style={styles.text_white_medium}>UserInfo</Text>
</DrawerButton> </DrawerButton>
{/* {/*

22
src/routes/UserInfo/UserInfo.tsx
View file

@ -22,13 +22,16 @@ import { ScrollView } from "react-native-gesture-handler";
import Select, { SelectConfig, SelectItem } from '@redmin_delishaj/react-native-select'; import Select, { SelectConfig, SelectItem } from '@redmin_delishaj/react-native-select';
import DropDownPicker from 'react-native-dropdown-picker' import DropDownPicker from 'react-native-dropdown-picker'
import SelectDropdown from 'react-native-select-dropdown' import SelectDropdown from 'react-native-select-dropdown'
import ImagePicker from 'react-native-image-picker'; import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon";
export default function UserInfo() { export default function UserInfo() {
const navigation = useNavigation<RootDrawerParamList>(); const navigation = useNavigation<RootDrawerParamList>();
const [isEditable, setIsEditable] = useState(false); const [isEditable, setIsEditable] = useState(false);
const options = ["Prog1", "Prog2", "Networking", "Database"]; const options = ["", "", "", ""];
const [isActive, setIsActive] = useState(false);
const toggleUserActive = () => {
setIsActive(!isActive);
};
//const dispatch = useDispatch(); //const dispatch = useDispatch();
// const creds = useSelector((state: RootState) => state.auth.creds); // const creds = useSelector((state: RootState) => state.auth.creds);
const [user, setUser] = useState({ const [user, setUser] = useState({
@ -41,11 +44,14 @@ export default function UserInfo() {
return ( return (
<ScrollView style={styles.background}> <ScrollView style={styles.background}>
<AnimatedContainer> <AnimatedContainer>
<Text style={{...styles. text_white_medium, ...{fontSize: 32}}}></Text> <Text style={{...styles.text_white_medium, ...{fontSize: 32}}}>Kurt Toledo</Text>
<View> <View>
<Text style ={styles. text_white_medium} >Kurt Toledo</Text> <Image source={require("./image/3135715.png")} style={styles.profile} />
<Text style ={styles. text_white_small} >Student</Text> <TouchableOpacity onPress={toggleUserActive} style={styles.button}>
<Image source={require("./image/3135715.png")} style={styles.profile} /> <Text style={[styles.text, isActive ? styles.activeText : styles.inactiveText]}>
Student {isActive ? 'Active' : 'Inactive'}
</Text>
</TouchableOpacity>
</View> </View>
<View <View
style={{ style={{
@ -161,7 +167,7 @@ export default function UserInfo() {
onSelect={(selectedItem, index) =>{ onSelect={(selectedItem, index) =>{
console.log(selectedItem, index) console.log(selectedItem, index)
}} }}
renderDropdownIcon={() =><SignupIcon size={32} /> renderDropdownIcon={() =><DropdownIcon size={32} />
} }
buttonTextStyle={{ buttonTextStyle={{

14
src/styles.tsx
View file

@ -105,7 +105,7 @@ const styles = StyleSheet.create({
profile: { profile: {
height: 80, height: 80,
width: 80, width: 80,
marginLeft: 10, alignSelf: 'center',
}, },
input: { input: {
height: 40, height: 40,
@ -129,7 +129,17 @@ const styles = StyleSheet.create({
fontSize: font_sizes.small, fontSize: font_sizes.small,
fontWeight: "bold", fontWeight: "bold",
}, },
button: {
padding: 10,
backgroundColor: colors.blue_2,
borderRadius: 5,
},
activeText: {
color: 'green',
},
inactiveText: {
color: 'white',
},
}); });