diff --git a/native/components/user-profile.react.js b/native/components/user-profile.react.js new file mode 100644 --- /dev/null +++ b/native/components/user-profile.react.js @@ -0,0 +1,78 @@ +// @flow + +import * as React from 'react'; +import { View, Text } from 'react-native'; + +import type { AccountUserInfo } from 'lib/types/user-types'; + +import SWMansionIcon from './swmansion-icon.react.js'; +import UserAvatar from '../avatars/user-avatar.react.js'; +import { useStyles } from '../themes/colors.js'; + +type Props = { + +userInfo: AccountUserInfo, +}; + +function UserProfile(props: Props): React.Node { + const { userInfo } = props; + + const styles = useStyles(unboundStyles); + + return ( + + + + + + {userInfo.username} + + + Copy username + + + + + ); +} + +const unboundStyles = { + container: { + backgroundColor: 'modalForeground', + paddingHorizontal: 16, + }, + moreIcon: { + color: 'modalButtonLabel', + alignSelf: 'flex-end', + }, + userInfoContainer: { + flexDirection: 'row', + }, + usernameContainer: { + justifyContent: 'center', + paddingLeft: 16, + }, + usernameText: { + color: 'modalForegroundLabel', + fontSize: 18, + fontWeight: '500', + }, + copyUsernameContainer: { + flexDirection: 'row', + justifyContent: 'center', + paddingTop: 8, + }, + copyUsernameIcon: { + color: 'purpleLink', + marginRight: 4, + }, + copyUsernameText: { + color: 'purpleLink', + fontSize: 12, + }, +}; + +export default UserProfile;