railbird-gql/src/component/session-card/session-card-stats-row-container.tsx
2024-02-20 20:53:29 -08:00

49 lines
1.1 KiB
TypeScript

import React from "react";
import { StyleSheet, View } from "react-native";
import SessionCardStat from "./session-card-stat";
const SessionCardStatsRowContainer = ({
makePercent,
medianRun,
duration,
shotPacing,
}) => {
const stats = [
{ displayName: "Make Percent", sessionStat: makePercent },
{ displayName: "Median Run", sessionStat: medianRun },
{ displayName: "Time Played", sessionStat: duration },
{ displayName: "Shot Pacing", sessionStat: shotPacing },
];
return (
<View style={styles.statsContainer}>
{stats.map((stat, index) => (
<React.Fragment key={index}>
<SessionCardStat
displayName={stat.displayName}
sessionStat={stat.sessionStat}
/>
{index < stats.length - 1 && <View style={styles.verticalSpacer} />}
</React.Fragment>
))}
</View>
);
};
const styles = StyleSheet.create({
statsContainer: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
margin: 16,
},
verticalSpacer: {
width: 1,
backgroundColor: "#A3A3A3",
height: "100%",
marginHorizontal: 12,
},
});
export default SessionCardStatsRowContainer;