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
|
import React from 'react'
import {observer} from 'mobx-react-lite'
import {Text, Image, ImageSourcePropType, StyleSheet, View} from 'react-native'
import {bsky} from '@adxp/mock-api'
import moment from 'moment'
import {FeedViewItemModel} from '../../state/models/feed-view'
const IMAGES: Record<string, ImageSourcePropType> = {
'alice.com': require('../../assets/alice.jpg'),
'bob.com': require('../../assets/bob.jpg'),
'carla.com': require('../../assets/carla.jpg'),
}
export const FeedItem = observer(function FeedItem({
item,
}: {
item: FeedViewItemModel
}) {
const record = item.record as unknown as bsky.Post.Record
return (
<View style={styles.outer}>
{item.repostedBy && (
<Text style={styles.repostedBy}>
Reposted by {item.repostedBy.displayName}
</Text>
)}
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<Image
style={styles.avi}
source={IMAGES[item.author.name] || IMAGES['alice.com']}
/>
</View>
<View style={styles.layoutContent}>
<View style={styles.meta}>
<Text style={[styles.metaItem, styles.metaDisplayName]}>
{item.author.displayName}
</Text>
<Text style={[styles.metaItem, styles.metaName]}>
@{item.author.name}
</Text>
<Text style={[styles.metaItem, styles.metaDate]}>
· {moment(item.indexedAt).fromNow(true)}
</Text>
</View>
<Text style={styles.postText}>{record.text}</Text>
</View>
</View>
</View>
)
})
const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
borderTopColor: '#e8e8e8',
backgroundColor: '#fff',
padding: 10,
},
repostedBy: {
paddingLeft: 70,
color: 'gray',
fontWeight: 'bold',
fontSize: 13,
},
layout: {
flexDirection: 'row',
},
layoutAvi: {
width: 70,
},
avi: {
width: 60,
height: 60,
borderRadius: 30,
resizeMode: 'cover',
},
layoutContent: {
flex: 1,
},
meta: {
flexDirection: 'row',
paddingTop: 2,
paddingBottom: 4,
},
metaItem: {
paddingRight: 5,
},
metaDisplayName: {
fontSize: 15,
fontWeight: 'bold',
},
metaName: {
fontSize: 14,
color: 'gray',
},
metaDate: {
fontSize: 14,
color: 'gray',
},
postText: {
fontSize: 15,
},
})
|
