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