mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {StyleSheet, TouchableOpacity} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {useProfileQuery} from '#/state/queries/profile'
7import {useSession} from '#/state/session'
8import {usePalette} from 'lib/hooks/usePalette'
9import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
10import {Text} from '../util/text/Text'
11import {UserAvatar} from '../util/UserAvatar'
12
13export function PostThreadComposePrompt({
14 onPressCompose,
15}: {
16 onPressCompose: () => void
17}) {
18 const {currentAccount} = useSession()
19 const {data: profile} = useProfileQuery({did: currentAccount?.did})
20 const pal = usePalette('default')
21 const {_} = useLingui()
22 const {isDesktop} = useWebMediaQueries()
23 return (
24 <TouchableOpacity
25 testID="replyPromptBtn"
26 style={[pal.view, pal.border, styles.prompt]}
27 onPress={() => onPressCompose()}
28 accessibilityRole="button"
29 accessibilityLabel={_(msg`Compose reply`)}
30 accessibilityHint={_(msg`Opens composer`)}>
31 <UserAvatar
32 avatar={profile?.avatar}
33 size={38}
34 type={profile?.associated?.labeler ? 'labeler' : 'user'}
35 />
36 <Text
37 type="xl"
38 style={[
39 pal.text,
40 isDesktop ? styles.labelDesktopWeb : styles.labelMobile,
41 ]}>
42 <Trans>Write your reply</Trans>
43 </Text>
44 </TouchableOpacity>
45 )
46}
47
48const styles = StyleSheet.create({
49 prompt: {
50 paddingHorizontal: 16,
51 paddingTop: 10,
52 paddingBottom: 10,
53 flexDirection: 'row',
54 alignItems: 'center',
55 borderTopWidth: StyleSheet.hairlineWidth,
56 },
57 labelMobile: {
58 paddingLeft: 12,
59 },
60 labelDesktopWeb: {
61 paddingLeft: 12,
62 },
63})