51 lines
907 B
TypeScript
51 lines
907 B
TypeScript
|
import React from "react";
|
||
|
|
import { StyleSheet, Text, View } from "react-native";
|
||
|
|
|
||
|
|
type StatItem = {
|
||
|
|
title: string;
|
||
|
|
value: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
type StatListProps = {
|
||
|
|
items: StatItem[];
|
||
|
|
style?: object;
|
||
|
|
};
|
||
|
|
|
||
|
|
const StatList: React.FC<StatListProps> = ({ items, style }) => {
|
||
|
|
return (
|
||
|
|
<View style={[styles.container, style]}>
|
||
|
|
{items.map((item, index) => (
|
||
|
|
<View key={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: {
|
||
|
|
flexDirection: "column",
|
||
|
|
flex: 1,
|
||
|
|
padding: 5,
|
||
|
|
},
|
||
|
|
item: {
|
||
|
|
borderLeftWidth: 0.5,
|
||
|
|
borderRightColor: "lightgrey",
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
fontSize: 16,
|
||
|
|
color: "grey",
|
||
|
|
textAlign: "center",
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
fontSize: 28,
|
||
|
|
fontWeight: "bold",
|
||
|
|
textAlign: "center",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default StatList;
|