-
Notifications
You must be signed in to change notification settings - Fork 0
/
Post.tsx
121 lines (115 loc) · 3.07 KB
/
Post.tsx
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import IconChat from '../../assets/icons/chat.svg';
import IconShare from '../../assets/icons/share.svg';
import IconFavorite from '../../assets/icons/favorite.svg';
import IconFavoriteBorder from '../../assets/icons/favorite_border.svg';
interface Post {
date: string;
avatar: string;
text: string;
comments: number;
likes: number;
liked?: boolean;
}
interface PostProps {
post: Post;
}
const PostContainer: React.FC<PostProps> = (props) => {
return (
<View style={styles.post}>
<View style={styles.postContent}>
<View style={styles.postAvatar}>
<Image style={styles.avatar} source={require('../assets/images/avatar.jpg')} />
</View>
<View style={styles.postDescription}>
<View style={styles.postInfo}>
<Text style={styles.postInfoText}>{props.post.date}</Text>
<Text style={styles.postInfoText}>@93alan</Text>
</View>
<Text style={styles.postText}>{props.post.text}</Text>
<View style={styles.postReactions}>
<View style={styles.postReaction}>
<IconChat width={18} height={18} fill="#8f9582" />
<Text style={styles.postReactionValue}>{props.post.comments}</Text>
</View>
<View style={styles.postReaction}>
{props.post.liked ? <IconFavorite width={18} height={18} fill="#8f9582" /> : <IconFavoriteBorder width={18} height={18} fill="#8f9582" />}
<Text style={styles.postReactionValue}>{props.post.likes}</Text>
</View>
<View style={styles.postReaction}>
<IconShare width={18} height={18} fill="#8f9582" />
</View>
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
post: {
borderBottomColor: '#dbdbdb',
borderBottomWidth: 1,
paddingTop: 16,
paddingBottom: 2,
width: '100%',
overflow: 'hidden',
},
postContent: {
padding: 16,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
},
postAvatar: {
height: 56,
width: 56,
flex: 1 / 5,
margin: 0,
// borderBottomWidth: 3,
// borderBottomColor: '#dadfd0',
// // border: "3px solid #dadfd0"
},
avatar: {
height: 56,
width: 56,
resizeMode: 'cover',
borderRadius: 100,
borderWidth: 5,
borderColor: 'rgba(218, 223, 208, 0.4)',
},
postDescription: {
flex: 4 / 5
},
postInfo: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
},
postInfoText: {
color: '#bebebe',
},
postText: {
marginTop: 4,
fontSize: 14,
lineHeight: 20,
maxHeight: 60,
overflow: 'hidden',
},
postReactions: {
marginTop: 4,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
},
postReaction: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
},
postReactionValue: {
fontSize: 14,
paddingLeft: 8,
}
});
export default PostContainer;