wip: tidy up styles, wireframed
This commit is contained in:
parent
7b4af08296
commit
bc7b066864
@ -8,6 +8,8 @@ export default function SessionDetails() {
|
|||||||
|
|
||||||
// Stats State
|
// Stats State
|
||||||
// TODO: needs to come from session context
|
// TODO: needs to come from session context
|
||||||
|
const [sessionTitle, setSessionTitle] = useState<string>("Afternoon Session");
|
||||||
|
const [date, setDate] = useState<string>("Today at 2:37pm");
|
||||||
const [timePlayed, setTimePlayed] = useState("5:03:10");
|
const [timePlayed, setTimePlayed] = useState("5:03:10");
|
||||||
const [medianRun, setMedianRun] = useState("7.3");
|
const [medianRun, setMedianRun] = useState("7.3");
|
||||||
const [makeRate, setMakeRate] = useState("34%");
|
const [makeRate, setMakeRate] = useState("34%");
|
||||||
@ -21,12 +23,16 @@ export default function SessionDetails() {
|
|||||||
<>
|
<>
|
||||||
<SlideModal modalVisible={visible} setModalVisible={setVisible}>
|
<SlideModal modalVisible={visible} setModalVisible={setVisible}>
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text style={styles.header}>Afternoon Session</Text>
|
<View style={styles.headerSection}>
|
||||||
|
<Text style={styles.header}>{sessionTitle}</Text>
|
||||||
|
<Text>{date}</Text>
|
||||||
|
</View>
|
||||||
<Image
|
<Image
|
||||||
source={{ uri: "https://picsum.photos/200" }}
|
source={{ uri: "https://picsum.photos/200" }}
|
||||||
style={styles.image}
|
style={styles.image}
|
||||||
/>
|
/>
|
||||||
<View style={styles.statsContainer}>
|
<View style={styles.statsContainer}>
|
||||||
|
<View style={styles.statColumn}>
|
||||||
<View style={styles.statItem}>
|
<View style={styles.statItem}>
|
||||||
<Text style={styles.statLabel}>TIME PLAYED</Text>
|
<Text style={styles.statLabel}>TIME PLAYED</Text>
|
||||||
<Text style={styles.statValue}>{timePlayed}</Text>
|
<Text style={styles.statValue}>{timePlayed}</Text>
|
||||||
@ -35,6 +41,8 @@ export default function SessionDetails() {
|
|||||||
<Text style={styles.statLabel}>MEDIAN RUN</Text>
|
<Text style={styles.statLabel}>MEDIAN RUN</Text>
|
||||||
<Text style={styles.statValue}>{medianRun}</Text>
|
<Text style={styles.statValue}>{medianRun}</Text>
|
||||||
</View>
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.statColumn}>
|
||||||
<View style={styles.statItem}>
|
<View style={styles.statItem}>
|
||||||
<Text style={styles.statLabel}>MAKE RATE</Text>
|
<Text style={styles.statLabel}>MAKE RATE</Text>
|
||||||
<Text style={styles.statValue}>{makeRate}</Text>
|
<Text style={styles.statValue}>{makeRate}</Text>
|
||||||
@ -44,6 +52,8 @@ export default function SessionDetails() {
|
|||||||
<Text style={styles.statValue}>{shotPacing}</Text>
|
<Text style={styles.statValue}>{shotPacing}</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.horizontalDivider} />
|
||||||
<Text style={styles.gameType}>{gameType}</Text>
|
<Text style={styles.gameType}>{gameType}</Text>
|
||||||
<Text style={styles.notes}>{notes}</Text>
|
<Text style={styles.notes}>{notes}</Text>
|
||||||
</View>
|
</View>
|
||||||
@ -56,41 +66,59 @@ export default function SessionDetails() {
|
|||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
padding: 20,
|
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
|
borderRadius: 20,
|
||||||
|
},
|
||||||
|
headerSection: {
|
||||||
|
marginTop: 15,
|
||||||
|
padding: 20,
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
marginBottom: 20,
|
|
||||||
},
|
},
|
||||||
image: {
|
image: {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: 200,
|
height: 248,
|
||||||
marginBottom: 20,
|
|
||||||
},
|
},
|
||||||
statsContainer: {
|
statsContainer: {
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
justifyContent: "space-around",
|
justifyContent: "space-between",
|
||||||
marginBottom: 20,
|
padding: 20,
|
||||||
|
},
|
||||||
|
statColumn: {
|
||||||
|
flex: 1,
|
||||||
|
padding: 5,
|
||||||
},
|
},
|
||||||
statItem: {
|
statItem: {
|
||||||
alignItems: "center",
|
borderLeftWidth: 0.5,
|
||||||
|
borderRightColor: "lightgrey",
|
||||||
|
marginBottom: 10,
|
||||||
},
|
},
|
||||||
statLabel: {
|
statLabel: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
color: "grey",
|
color: "grey",
|
||||||
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
statValue: {
|
statValue: {
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
|
textAlign: "center",
|
||||||
|
},
|
||||||
|
horizontalDivider: {
|
||||||
|
borderBottomWidth: 0.5,
|
||||||
|
color: "lightgrey",
|
||||||
|
width: "90%",
|
||||||
|
alignSelf: "center",
|
||||||
},
|
},
|
||||||
gameType: {
|
gameType: {
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
marginBottom: 10,
|
textAlign: "center",
|
||||||
|
marginTop: 10,
|
||||||
},
|
},
|
||||||
notes: {
|
notes: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
color: "grey",
|
color: "grey",
|
||||||
|
padding: 20,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user