50 lines
949 B
TypeScript
50 lines
949 B
TypeScript
import React from "react";
|
|
import { StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native";
|
|
import { borders } from "../../styles";
|
|
|
|
type StatItem = {
|
|
title: string;
|
|
value: string;
|
|
};
|
|
|
|
type StatListProps = {
|
|
items: StatItem[];
|
|
style?: StyleProp<ViewStyle>;
|
|
};
|
|
|
|
const StatList: React.FC<StatListProps> = ({ items, style }) => {
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
{items.map((item, index) => (
|
|
<View key={`${item.title}-${index}`} style={styles.item}>
|
|
<Text style={styles.title}>{item.title}</Text>
|
|
<Text style={styles.value}>{item.value}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 5,
|
|
},
|
|
item: {
|
|
marginBottom: 10,
|
|
...borders.dottedLeftBorder,
|
|
},
|
|
title: {
|
|
fontSize: 15,
|
|
color: "grey",
|
|
textAlign: "center",
|
|
},
|
|
value: {
|
|
fontSize: 28,
|
|
fontWeight: "bold",
|
|
textAlign: "center",
|
|
},
|
|
});
|
|
|
|
export default StatList;
|