Merge pull request #475 from IvanIFChen/tma948-video-playback

[TMA-948] Viewing Videos

1 files changed, 53 insertions, 0 deletions

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