Move onPressReply into child component (#4898)

* Move ComposePrompt to post-thread/

* Move onPressReply into child component

1 files changed, 63 insertions, 0 deletions

diff --git a/src/view/com/post-thread/PostThreadComposePrompt.tsx b/src/view/com/post-thread/PostThreadComposePrompt.tsx
new file mode 100644
index 000000000..62b28cc75
--- /dev/null
+++ b/src/view/com/post-thread/PostThreadComposePrompt.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {Text} from '../util/text/Text'
+import {UserAvatar} from '../util/UserAvatar'
+
+export function PostThreadComposePrompt({
+  onPressCompose,
+}: {
+  onPressCompose: () => void
+}) {
+  const {currentAccount} = useSession()
+  const {data: profile} = useProfileQuery({did: currentAccount?.did})
+  const pal = usePalette('default')
+  const {_} = useLingui()
+  const {isDesktop} = useWebMediaQueries()
+  return (
+    <TouchableOpacity
+      testID="replyPromptBtn"
+      style={[pal.view, pal.border, styles.prompt]}
+      onPress={() => onPressCompose()}
+      accessibilityRole="button"
+      accessibilityLabel={_(msg`Compose reply`)}
+      accessibilityHint={_(msg`Opens composer`)}>
+      <UserAvatar
+        avatar={profile?.avatar}
+        size={38}
+        type={profile?.associated?.labeler ? 'labeler' : 'user'}
+      />
+      <Text
+        type="xl"
+        style={[
+          pal.text,
+          isDesktop ? styles.labelDesktopWeb : styles.labelMobile,
+        ]}>
+        <Trans>Write your reply</Trans>
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  prompt: {
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  labelMobile: {
+    paddingLeft: 12,
+  },
+  labelDesktopWeb: {
+    paddingLeft: 12,
+  },
+})