callie.on-her.computer
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import {msg} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4
5import {logger} from '#/logger'
6import {atoms as a, useTheme} from '#/alf'
7import {Button} from '#/components/Button'
8import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
9import {Text} from '#/components/Typography'
10
11export function ThreadItemShowOtherReplies({onPress}: {onPress: () => void}) {
12 const {_} = useLingui()
13 const t = useTheme()
14 const label = _(msg`Show more replies`)
15
16 return (
17 <Button
18 onPress={() => {
19 onPress()
20 logger.metric('thread:click:showOtherReplies', {})
21 }}
22 label={label}>
23 {({hovered, pressed}) => (
24 <View
25 style={[
26 a.flex_1,
27 a.flex_row,
28 a.align_center,
29 a.gap_sm,
30 a.py_lg,
31 a.px_xl,
32 a.border_t,
33 t.atoms.border_contrast_low,
34 hovered || pressed ? t.atoms.bg_contrast_25 : t.atoms.bg,
35 ]}>
36 <View
37 style={[
38 t.atoms.bg_contrast_25,
39 a.align_center,
40 a.justify_center,
41 {
42 width: 26,
43 height: 26,
44 borderRadius: 13,
45 marginRight: 4,
46 },
47 ]}>
48 <EyeSlash size="sm" fill={t.atoms.text_contrast_medium.color} />
49 </View>
50 <Text
51 style={[t.atoms.text_contrast_medium, a.flex_1, a.leading_snug]}
52 numberOfLines={1}>
53 {label}
54 </Text>
55 </View>
56 )}
57 </Button>
58 )
59}