Create MomentCommentPrevew component

1 files changed, 52 insertions, 0 deletions

diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
new file mode 100644
index 00000000..45bbbfad
--- /dev/null
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -0,0 +1,52 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {MomentPostType, ScreenType} from '../../types';
+import {normalize} from '../../utils';
+
+interface MomentCommentPreviewProps {
+  moment: MomentPostType;
+  screenType: ScreenType;
+}
+
+const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
+  moment,
+  screenType,
+}) => {
+  const navigation = useNavigation();
+  const commentCountText =
+    moment.comments_count === 0
+      ? 'No Comments'
+      : moment.comments_count + ' comments';
+
+  return (
+    <TouchableOpacity
+      style={styles.commentsPreviewContainer}
+      onPress={() =>
+        navigation.push('MomentCommentsScreen', {
+          moment_id: moment.moment_id,
+          screenType,
+        })
+      }>
+      <Text style={styles.commentCount}>{commentCountText}</Text>
+      <Text>TODO: Add comment preview here</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  commentsPreviewContainer: {
+    flexDirection: 'column',
+    marginHorizontal: '5%',
+    marginBottom: '2%',
+    borderWidth: 1,
+  },
+  commentCount: {
+    fontWeight: '700',
+    color: 'white',
+    fontSize: normalize(12),
+  },
+});
+
+export default MomentCommentPreview;