Add comment count component

1 files changed, 47 insertions, 0 deletions

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
new file mode 100644
index 00000000..cb30fe76
--- /dev/null
+++ b/src/components/comments/CommentsCount.tsx
@@ -0,0 +1,47 @@
+import {useNavigation} from '@react-navigation/core';
+import React from 'react';
+import {Text} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import CommentsIcon from '../../assets/icons/moment-comment-icon.svg';
+import {MomentPostType, ScreenType} from '../../types';
+import {normalize} from '../../utils';
+
+interface CommentsCountProps {
+  moment: MomentPostType;
+  screenType: ScreenType;
+}
+
+const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
+  const navigation = useNavigation();
+  return (
+    <TouchableOpacity
+      style={{
+        minWidth: 50,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+      onPress={() =>
+        navigation.navigate('MomentCommentsScreen', {
+          moment_id: moment.moment_id,
+          screenType,
+        })
+      }>
+      <CommentsIcon width={25} height={25} />
+      <Text
+        style={{
+          fontWeight: '500',
+          fontSize: normalize(11),
+          lineHeight: normalize(13),
+          letterSpacing: normalize(0.05),
+          textAlign: 'center',
+          color: 'white',
+          marginTop: normalize(5),
+        }}>
+        {moment.comments_count}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export default CommentsCount;