aboutsummaryrefslogtreecommitdiff
path: root/src/components/profile/FollowCount.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/profile/FollowCount.tsx')
-rw-r--r--src/components/profile/FollowCount.tsx42
1 files changed, 42 insertions, 0 deletions
diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
new file mode 100644
index 00000000..72817e7a
--- /dev/null
+++ b/src/components/profile/FollowCount.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {View, Text, StyleSheet, ViewProps} from 'react-native';
+
+interface FollowCountProps extends ViewProps {
+ mode: 'followers' | 'following';
+ count: number;
+}
+
+const FollowCount: React.FC<FollowCountProps> = ({style, mode, count}) => {
+ const displayed: string =
+ count < 5e3
+ ? `${count}`
+ : count < 1e5
+ ? `${(count / 1e3).toFixed(1)}k`
+ : count < 1e6
+ ? `${(count / 1e3).toFixed(0)}k`
+ : `${count / 1e6}m`;
+ return (
+ <View style={[styles.container, style]}>
+ <Text style={styles.count}>{displayed}</Text>
+ <Text style={styles.label}>
+ {mode === 'followers' ? 'Followers' : 'Following'}
+ </Text>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ alignItems: 'center',
+ },
+ count: {
+ fontWeight: '700',
+ fontSize: 18,
+ },
+ label: {
+ fontWeight: '400',
+ fontSize: 16,
+ },
+});
+
+export default FollowCount;