78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import { useUser } from '@clerk/clerk-react'
|
|
import React from 'react'
|
|
import { Image, StyleSheet, Text, View } from 'react-native'
|
|
import { SignOutButton } from '../components/SignOutButton'
|
|
|
|
export default function PostsScreen() {
|
|
const { user } = useUser()
|
|
|
|
return (
|
|
<>
|
|
<View style={styles.wrapper}>
|
|
<View style={styles.profileInfoCard}>
|
|
<View style={styles.profilePic}>
|
|
<Image source={{ uri: user?.imageUrl }} style={styles.image}></Image>
|
|
</View>
|
|
<View style={styles.nameContainer}>
|
|
<Text style={styles.text}>
|
|
{user?.firstName} {user?.lastName}
|
|
</Text>
|
|
<Text style={styles.text}>{user?.emailAddresses[0].emailAddress}</Text>
|
|
</View>
|
|
<View style={styles.buttonLayout}>
|
|
<SignOutButton></SignOutButton>
|
|
</View>
|
|
</View>
|
|
<View style={styles.userPostsCard}></View>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
flex: 1,
|
|
backgroundColor: '#25292e',
|
|
padding: 16
|
|
},
|
|
profileInfoCard: {
|
|
backgroundColor: '#373d44ff',
|
|
flex: 0.25,
|
|
marginTop: 12,
|
|
borderColor: '#626e7aff',
|
|
borderStyle: 'solid',
|
|
borderWidth: 1,
|
|
borderRadius: 12
|
|
},
|
|
profilePic: {
|
|
flex: 0.4,
|
|
marginTop: 12,
|
|
display: 'flex',
|
|
alignItems: 'center'
|
|
},
|
|
image: {
|
|
height: 75,
|
|
width: 75
|
|
},
|
|
nameContainer: { flex: 0.3, display: 'flex', alignItems: 'center' },
|
|
text: {
|
|
color: 'white',
|
|
fontSize: 16,
|
|
marginTop: 6
|
|
},
|
|
buttonLayout: {
|
|
flex: 0.2,
|
|
alignItems: 'center',
|
|
marginTop: 12
|
|
},
|
|
userPostsCard: {
|
|
backgroundColor: '#373d44ff',
|
|
flex: 0.75,
|
|
marginTop: 12,
|
|
borderColor: '#626e7aff',
|
|
borderStyle: 'solid',
|
|
borderWidth: 1,
|
|
borderRadius: 12
|
|
}
|
|
})
|