1 files changed, 66 insertions, 0 deletions
diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx
new file mode 100644
index 00000000..91d54cab
--- /dev/null
+++ b/src/components/profile/FriendsCount.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import {View, Text, StyleSheet, ViewProps} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useNavigation} from '@react-navigation/native';
+import {RootState} from '../../store/rootReducer';
+import {useSelector} from 'react-redux';
+import {ScreenType} from '../../types';
+
+interface FriendsCountProps extends ViewProps {
+  userXId: string | undefined;
+  screenType: ScreenType;
+}
+
+const FriendsCount: React.FC<FriendsCountProps> = ({
+  style,
+  userXId,
+  screenType,
+}) => {
+  const count = (userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.friends)
+  )?.friends.length;
+
+  const displayedCount: string =
+    count < 5e3
+      ? `${count}`
+      : count < 1e5
+      ? `${(count / 1e3).toFixed(1)}k`
+      : count < 1e6
+      ? `${(count / 1e3).toFixed(0)}k`
+      : `${count / 1e6}m`;
+
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity
+      style={{right: '20%'}}
+      onPress={() =>
+        navigation.push('FriendsListScreen', {
+          userXId,
+          screenType,
+        })
+      }>
+      <View style={[styles.container, style]}>
+        <Text style={styles.count}>{displayedCount}</Text>
+        <Text style={styles.label}>Friends</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  count: {
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  label: {
+    fontWeight: '500',
+    fontSize: 16,
+  },
+});
+
+export default FriendsCount;