59 lines
1.2 KiB
TypeScript
59 lines
1.2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { StyleSheet, View } from "react-native";
|
||
|
|
import AggregateStat from "./aggregate_stat";
|
||
|
|
|
||
|
|
const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
|
||
|
|
return (
|
||
|
|
<View style={styles.statsContainer}>
|
||
|
|
<View>
|
||
|
|
<AggregateStat
|
||
|
|
displayName="Make Percent"
|
||
|
|
aggregateStat={makePercent}
|
||
|
|
numberFormat="%"
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.verticalSpacer} />
|
||
|
|
<View>
|
||
|
|
<AggregateStat
|
||
|
|
displayName="Median Run"
|
||
|
|
aggregateStat={medianRun}
|
||
|
|
numberFormat=""
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.verticalSpacer} />
|
||
|
|
<View>
|
||
|
|
<AggregateStat
|
||
|
|
displayName="Time Played"
|
||
|
|
aggregateStat={duration}
|
||
|
|
numberFormat=""
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.verticalSpacer} />
|
||
|
|
<View>
|
||
|
|
<AggregateStat
|
||
|
|
displayName="Shot Pacing"
|
||
|
|
aggregateStat={shotPacing}
|
||
|
|
numberFormat=""
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
statsContainer: {
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "space-around",
|
||
|
|
margin: 16,
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
verticalSpacer: {
|
||
|
|
width: 0.5,
|
||
|
|
backgroundColor: "#A3A3A3",
|
||
|
|
height: "75%",
|
||
|
|
marginHorizontal: 12,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default SessionStats;
|