mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {View} from 'react-native'
2import {msg, Trans} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4
5import {PressableScale} from '#/lib/custom-animations/PressableScale'
6import {useHaptics} from '#/lib/haptics'
7import {useProfileQuery} from '#/state/queries/profile'
8import {useSession} from '#/state/session'
9import {UserAvatar} from '#/view/com/util/UserAvatar'
10import {atoms as a, ios, useBreakpoints, useTheme} from '#/alf'
11import {useInteractionState} from '#/components/hooks/useInteractionState'
12import {Text} from '#/components/Typography'
13
14export function PostThreadComposePrompt({
15 onPressCompose,
16}: {
17 onPressCompose: () => void
18}) {
19 const {currentAccount} = useSession()
20 const {data: profile} = useProfileQuery({did: currentAccount?.did})
21 const {_} = useLingui()
22 const {gtMobile} = useBreakpoints()
23 const t = useTheme()
24 const playHaptic = useHaptics()
25 const {
26 state: hovered,
27 onIn: onHoverIn,
28 onOut: onHoverOut,
29 } = useInteractionState()
30
31 return (
32 <PressableScale
33 accessibilityRole="button"
34 accessibilityLabel={_(msg`Compose reply`)}
35 accessibilityHint={_(msg`Opens composer`)}
36 style={[
37 gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11},
38 a.px_sm,
39 a.border_t,
40 t.atoms.border_contrast_low,
41 t.atoms.bg,
42 ]}
43 onPressIn={ios(() => playHaptic('Light'))}
44 onPress={() => {
45 onPressCompose()
46 playHaptic('Light')
47 }}
48 onLongPress={ios(() => {
49 onPressCompose()
50 playHaptic('Heavy')
51 })}
52 onHoverIn={onHoverIn}
53 onHoverOut={onHoverOut}>
54 <View
55 style={[
56 a.flex_row,
57 a.align_center,
58 a.p_sm,
59 a.gap_sm,
60 a.rounded_full,
61 (!gtMobile || hovered) && t.atoms.bg_contrast_25,
62 a.transition_color,
63 ]}>
64 <UserAvatar
65 size={gtMobile ? 24 : 22}
66 avatar={profile?.avatar}
67 type={profile?.associated?.labeler ? 'labeler' : 'user'}
68 />
69 <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
70 <Trans>Write your reply</Trans>
71 </Text>
72 </View>
73 </PressableScale>
74 )
75}