Reza_ashrafi
3 years ago
parent
c7cc797b83
commit
26c33c70ca
25 changed files with 964 additions and 328 deletions
|
After Width: | Height: | Size: 438 B |
@ -0,0 +1,85 @@ |
||||
import { View, Text, Appearance, Platform, Pressable } from "react-native"; |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
import Svg, { G, Path } from "react-native-svg"; |
||||
|
||||
//style
|
||||
import tw from "tailwind-rn"; |
||||
import fontSize from "../../../constants/fontSize"; |
||||
import Colors from "../../../constants/Colors"; |
||||
|
||||
const ios = Platform.OS === "ios"; |
||||
|
||||
const Trophy = ({}) => { |
||||
const colorScheme = Appearance.getColorScheme(); |
||||
const [dropdown, setDropdown] = React.useState(true); |
||||
return ( |
||||
<View |
||||
style={[ |
||||
tw( |
||||
`w-full flex py-4 px-3 justify-between ${ |
||||
ios ? "flex-row-reverse" : "flex-row" |
||||
}` |
||||
), |
||||
{ backgroundColor: Colors.theme1[colorScheme].yellow2 }, |
||||
]} |
||||
> |
||||
<View style={[tw(`flex ${ios ? "flex-row-reverse" : "flex-row"}`)]}> |
||||
<Svg xmlns="http://www.w3.org/2000/svg" width={23.862} height={23.862}> |
||||
<G fill="none" stroke="#d6d020" data-name="vuesax/linear/cup"> |
||||
<Path |
||||
d="M12.08 16.405v2.088" |
||||
strokeLinecap="round" |
||||
strokeLinejoin="round" |
||||
strokeWidth="1.5" |
||||
/> |
||||
<Path |
||||
data-name="Vector" |
||||
strokeWidth="1.5" |
||||
d="M7.109 21.874h9.942v-.995a1.994 1.994 0 0 0-1.988-1.988H9.097a1.994 1.994 0 0 0-1.988 1.988v.994Z" |
||||
/> |
||||
<Path |
||||
data-name="Vector" |
||||
d="M6.115 21.873h11.931M11.931 15.907a6.955 6.955 0 0 1-6.96-6.959V5.965a3.976 3.976 0 0 1 3.977-3.977h5.965a3.976 3.976 0 0 1 3.977 3.977v2.983a6.955 6.955 0 0 1-6.959 6.959Z" |
||||
strokeLinecap="round" |
||||
strokeLinejoin="round" |
||||
strokeWidth="1.5" |
||||
/> |
||||
<Path |
||||
data-name="Vector" |
||||
d="M5.438 11.583a4.831 4.831 0 0 1-1.919-1.193 5.3 5.3 0 0 1-1.491-3.579 2.461 2.461 0 0 1 2.486-2.486h.646a3.734 3.734 0 0 0-.3 1.491v2.983a7.007 7.007 0 0 0 .578 2.784ZM18.423 11.583a4.831 4.831 0 0 0 1.919-1.193 5.3 5.3 0 0 0 1.491-3.579 2.461 2.461 0 0 0-2.485-2.486h-.647a3.734 3.734 0 0 1 .3 1.491v2.983a7.007 7.007 0 0 1-.578 2.784Z" |
||||
strokeLinecap="round" |
||||
strokeLinejoin="round" |
||||
strokeWidth="1.5" |
||||
/> |
||||
</G> |
||||
</Svg> |
||||
<Text |
||||
style={{ |
||||
fontFamily: "bold", |
||||
fontSize: fontSize.lg, |
||||
marginRight: 10, |
||||
color: Colors.theme1[colorScheme].green79, |
||||
}} |
||||
> |
||||
{"امتیاز شما" + " " + 14560} |
||||
</Text> |
||||
</View> |
||||
<Pressable> |
||||
<Text |
||||
style={{ |
||||
fontFamily: "light", |
||||
fontSize: fontSize.tiny, |
||||
color: Colors.theme1[colorScheme].green79, |
||||
}} |
||||
> |
||||
مشاهده جوایز |
||||
</Text> |
||||
</Pressable> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
export default connect(mapStateToProps)(Trophy); |
||||
@ -0,0 +1,162 @@ |
||||
import { View, Text, Image, Appearance, Platform, Pressable } from "react-native"; |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
import Svg, { Path } from "react-native-svg"; |
||||
|
||||
//style
|
||||
import tw from "tailwind-rn"; |
||||
import fontSize from "../../../constants/fontSize"; |
||||
import Colors from "../../../constants/Colors"; |
||||
|
||||
const ios = Platform.OS === "ios"; |
||||
|
||||
const User = ({ user }) => { |
||||
const colorScheme = Appearance.getColorScheme(); |
||||
const [dropdown, setDropdown] = React.useState(true); |
||||
return ( |
||||
<View style={tw(`w-full flex-col ${ios ? "items-end" : ""}`)}> |
||||
<Pressable |
||||
style={tw( |
||||
`w-full mt-2 mb-2 flex justify-between items-center ${ |
||||
ios ? "flex-row-reverse" : "flex-row" |
||||
}` |
||||
)} |
||||
onPress={() => setDropdown(!dropdown)} |
||||
> |
||||
<View |
||||
style={tw( |
||||
`flex items-center ${ios ? "flex-row-reverse" : "flex-row"}` |
||||
)} |
||||
> |
||||
{user?.picFileId ? ( |
||||
<Image |
||||
source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }} |
||||
style={[tw("rounded-full"), { width: 70, height: 70 }]} |
||||
/> |
||||
) : ( |
||||
<View |
||||
style={[ |
||||
tw("rounded-full bg-gray-400"), |
||||
{ minWidth: 60, minHeight: 60, zIndex: 1 }, |
||||
]} |
||||
></View> |
||||
)} |
||||
<View style={tw(`flex flex-col ${ios ? "items-end" : ""}`)}> |
||||
<Text |
||||
style={{ |
||||
fontSize: fontSize.xl, |
||||
color: Colors.theme1[colorScheme].gray20, |
||||
fontFamily: "regular", |
||||
}} |
||||
> |
||||
{user?.firstName + " " + user?.lastName} |
||||
</Text> |
||||
<Text |
||||
style={{ |
||||
fontSize: fontSize.tiny, |
||||
color: Colors.theme1[colorScheme].gray20, |
||||
fontFamily: "light", |
||||
}} |
||||
> |
||||
{user?.cellphone} |
||||
</Text> |
||||
</View> |
||||
</View> |
||||
<Svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={24} |
||||
height={24} |
||||
style={{ transform: [{ rotate: dropdown ? "0deg" : "180deg" }] }} |
||||
> |
||||
<Path |
||||
d="M6.08 15.82h11.84a1.077 1.077 0 0 0 .76-1.84L13.499 8.8a2.131 2.131 0 0 0-3.01 0l-1.97 1.97-3.21 3.21a1.082 1.082 0 0 0 .771 1.84Z" |
||||
fill="#c6c6c6" |
||||
data-name="vuesax/bold/arrow-down" |
||||
/> |
||||
</Svg> |
||||
</Pressable> |
||||
{dropdown && ( |
||||
<View |
||||
style={tw(`flex flex-col w-full pr-16 ${ios ? "items-end" : " "}`)} |
||||
> |
||||
<View |
||||
style={[ |
||||
tw( |
||||
`flex items-center w-full pb-3 mb-4 ${ |
||||
ios ? "flex-row-reverse" : "flex-row " |
||||
}` |
||||
), |
||||
{ |
||||
borderBottomWidth: 1, |
||||
borderColor: Colors.theme1[colorScheme].grayE3, |
||||
}, |
||||
]} |
||||
> |
||||
{user?.picFileId ? ( |
||||
<Image |
||||
source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }} |
||||
style={[tw("rounded-full"), { width: 30, height: 30 }]} |
||||
/> |
||||
) : ( |
||||
<View |
||||
style={[ |
||||
tw("rounded-full bg-gray-400"), |
||||
{ minWidth: 30, minHeight: 30, zIndex: 1 }, |
||||
]} |
||||
></View> |
||||
)} |
||||
<Text |
||||
style={{ |
||||
fontSize: fontSize.base, |
||||
color: Colors.theme1[colorScheme].gray20, |
||||
fontFamily: "regular", |
||||
}} |
||||
> |
||||
{user?.firstName + " " + user?.lastName} |
||||
</Text> |
||||
</View> |
||||
<View |
||||
style={[ |
||||
tw( |
||||
`flex items-center w-full pb-3 mb-3 ${ |
||||
ios ? "flex-row-reverse" : "flex-row " |
||||
}` |
||||
), |
||||
{ |
||||
borderBottomWidth: 1, |
||||
borderColor: Colors.theme1[colorScheme].grayE3, |
||||
}, |
||||
]} |
||||
> |
||||
<Text |
||||
style={{ |
||||
fontSize: fontSize.base, |
||||
fontFamily: "bold", |
||||
color: Colors.theme1[colorScheme].gray20, |
||||
}} |
||||
> |
||||
افزودن حساب کاربری جدید |
||||
</Text> |
||||
<Text |
||||
style={{ |
||||
marginRight: 5, |
||||
marginTop: 3, |
||||
fontSize: fontSize.xl2, |
||||
fontFamily: "bold", |
||||
color: Colors.theme1[colorScheme].gray20, |
||||
}} |
||||
> |
||||
+ |
||||
</Text> |
||||
</View> |
||||
</View> |
||||
)} |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
user: JSON.parse(state.user.status), |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(User); |
||||
@ -1,13 +1,93 @@ |
||||
import React from 'react' |
||||
import { View, Text } from 'react-native'; |
||||
import {connect} from 'react-redux'; |
||||
import React, { useState, useEffect } from "react"; |
||||
import { |
||||
View, |
||||
Text, |
||||
ScrollView, |
||||
Dimensions, |
||||
StyleSheet, |
||||
Pressable, |
||||
SafeAreaView, |
||||
StatusBar, |
||||
LayoutAnimation, |
||||
Appearance, |
||||
} from "react-native"; |
||||
import { connect } from "react-redux"; |
||||
import { useNavigation } from "@react-navigation/native"; |
||||
|
||||
//components
|
||||
import Navbar from "../../components/Navbar"; |
||||
import Drawer from "../../components/Drawer"; |
||||
import User from "./components/User"; |
||||
import Trophy from "./components/Trophy"; |
||||
import List from "./components/List"; |
||||
|
||||
//style
|
||||
import fontSize from "../../constants/fontSize"; |
||||
import Colors from "../../constants/Colors"; |
||||
import tw from "tailwind-rn"; |
||||
|
||||
const { width, height } = Dimensions.get("window"); |
||||
|
||||
function Profile({}) { |
||||
const navigation = useNavigation(); |
||||
const colorScheme = Appearance.getColorScheme(); |
||||
const [position, setPosition] = useState("100%"); |
||||
|
||||
useEffect(() => {}, []); |
||||
|
||||
const setBoxPosition = () => { |
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); |
||||
setPosition(position === "100%" ? "0%" : "100%"); |
||||
}; |
||||
|
||||
return ( |
||||
<View> |
||||
<Text></Text> |
||||
</View> |
||||
) |
||||
<SafeAreaView |
||||
style={{ |
||||
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, |
||||
position: "relative", |
||||
}} |
||||
> |
||||
<Navbar |
||||
setBoxPosition={setBoxPosition} |
||||
headerOptions={{ |
||||
logo: false, |
||||
menu: false, |
||||
hamburgerMenu: false, |
||||
title: "حساب کاربری", |
||||
bookmark: false, |
||||
qr: false, |
||||
back: false, |
||||
}} |
||||
/> |
||||
<Drawer setBoxPosition={setBoxPosition} position={position} /> |
||||
<ScrollView |
||||
contentContainerStyle={styles.contentContainerStyle} |
||||
style={styles.container} |
||||
> |
||||
<User /> |
||||
<Trophy /> |
||||
<List /> |
||||
</ScrollView> |
||||
</SafeAreaView> |
||||
); |
||||
} |
||||
|
||||
export default Profile; |
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = {}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Profile); |
||||
|
||||
const styles = StyleSheet.create({ |
||||
contentContainerStyle: { |
||||
paddingBottom: 100, |
||||
position: "relative", |
||||
}, |
||||
container: { |
||||
width: Dimensions.get("window").width, |
||||
backgroundColor: "white", |
||||
flexDirection: "column", |
||||
paddingVertical: 5, |
||||
paddingHorizontal: 16, |
||||
}, |
||||
}); |
||||
|
||||
Loading…
Reference in new issue