/
Profile.js
44 lines (37 loc) 路 1.2 KB
/
Profile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* eslint-disable react/prop-types */
import * as React from 'react';
import { Image, View, Text, StyleSheet } from 'react-sketchapp';
import { colors, fonts, spacing } from '../designSystem';
const styles = StyleSheet.create({
container: {
backgroundColor: colors.Haus,
padding: 20,
width: 260,
},
avatar: {
height: 220,
resizeMode: 'contain',
marginBottom: 20,
borderRadius: 10,
},
title: fonts['Title 2'],
subtitle: fonts['Title 3'],
body: fonts.Body,
});
const Avatar = ({ url }) => <Image source={url} style={styles.avatar} />;
const Title = ({ children }) => <Text style={styles.title}>{children}</Text>;
const Subtitle = ({ children }) => <Text style={styles.subtitle}>{children}</Text>;
const Body = ({ children }) => <Text style={styles.body}>{children}</Text>;
const Profile = props => (
<View style={styles.container}>
<Avatar url={props.user.profileImageUrl} />
<View style={{ marginBottom: spacing }}>
<Title>{props.user.name}</Title>
<Subtitle>@{props.user.screenname}</Subtitle>
</View>
<Body>{props.user.description}</Body>
<Body>{props.user.location}</Body>
<Body>{props.user.url}</Body>
</View>
);
export default Profile;