Chore: add translations to stats

components/stats/StatsOverview.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from '../common/app-text'
+
+import { Sizes, Spacing, Typography } from '../../styles'
+
+const StatsOverview = ({ data }) => {
+  return data.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
+}
+
+StatsOverview.propTypes = {
+  data: PropTypes.array.isRequired,
+}
+
+const Row = ({ rowContent }) => {
+  return (
+    <View style={styles.row}>
+      <Cell content={rowContent[0]} isLeft />
+      <Cell content={rowContent[1]} />
+    </View>
+  )
+}
+
+Row.propTypes = {
+  rowContent: PropTypes.array.isRequired,
+}
+
+const Cell = ({ content, isLeft }) => {
+  const styleContainer = isLeft ? styles.cellLeft : styles.cellRight
+  const styleText = isLeft ? styles.accentPurpleBig : styles.accentOrange
+  const numberOfLines = isLeft ? 1 : 2
+  const ellipsizeMode = isLeft ? 'clip' : 'tail'
+
+  return (
+    <View style={styleContainer}>
+      <AppText
+        numberOfLines={numberOfLines}
+        ellipsizeMode={ellipsizeMode}
+        style={styleText}
+      >
+        {content}
+      </AppText>
+    </View>
+  )
+}
+
+Cell.propTypes = {
+  content: PropTypes.node.isRequired,
+  isLeft: PropTypes.bool,
+}
+
+const styles = StyleSheet.create({
+  accentOrange: {
+    ...Typography.accentOrange,
+    fontSize: Sizes.small,
+    margin: Sizes.tiny,
+  },
+  accentPurpleBig: {
+    ...Typography.accentPurpleBig,
+    marginRight: Spacing.tiny,
+  },
+  cellLeft: {
+    alignItems: 'flex-end',
+    flex: 3,
+    justifyContent: 'center',
+  },
+  cellRight: { flex: 5 },
+  row: { flexDirection: 'row' },
+})
+
+export default StatsOverview