mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {memo} from 'react'
2import {View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {type ThreadItem} from '#/state/queries/usePostThread'
7import {
8 LINEAR_AVI_WIDTH,
9 OUTER_SPACE,
10 REPLY_LINE_WIDTH,
11} from '#/screens/PostThread/const'
12import {atoms as a, useTheme} from '#/alf'
13import {ArrowTopCircle_Stroke2_Corner0_Rounded as UpIcon} from '#/components/icons/ArrowTopCircle'
14import {Link} from '#/components/Link'
15import {Text} from '#/components/Typography'
16
17export const ThreadItemReadMoreUp = memo(function ThreadItemReadMoreUp({
18 item,
19}: {
20 item: Extract<ThreadItem, {type: 'readMoreUp'}>
21}) {
22 const t = useTheme()
23 const {_} = useLingui()
24
25 return (
26 <Link
27 label={_(msg`Continue thread`)}
28 to={item.href}
29 style={[
30 a.gap_xs,
31 {
32 paddingTop: OUTER_SPACE,
33 paddingHorizontal: OUTER_SPACE,
34 },
35 ]}>
36 {({hovered, pressed}) => {
37 const interacted = hovered || pressed
38 return (
39 <View>
40 <View style={[a.flex_row, a.align_center, a.gap_md]}>
41 <View
42 style={[
43 a.align_center,
44 {
45 width: LINEAR_AVI_WIDTH,
46 },
47 ]}>
48 <UpIcon
49 fill={
50 interacted
51 ? t.atoms.text_contrast_high.color
52 : t.atoms.text_contrast_low.color
53 }
54 width={24}
55 />
56 </View>
57 <Text
58 style={[
59 a.text_sm,
60 t.atoms.text_contrast_medium,
61 interacted && [a.underline],
62 ]}>
63 <Trans>Continue thread...</Trans>
64 </Text>
65 </View>
66 <View
67 style={[
68 a.align_center,
69 {
70 width: LINEAR_AVI_WIDTH,
71 },
72 ]}>
73 <View
74 style={[
75 a.mt_xs,
76 {
77 height: OUTER_SPACE / 2,
78 width: REPLY_LINE_WIDTH,
79 backgroundColor: t.atoms.border_contrast_low.borderColor,
80 },
81 ]}
82 />
83 </View>
84 </View>
85 )
86 }}
87 </Link>
88 )
89})