rebase

src/component/modals/session-details.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import { Button, Image, StyleSheet, Text, View } from "react-native";
+import SlideModal from "./slide-modal";
+
+export default function SessionDetails() {
+	// Modal State
+	const [visible, setVisible] = useState<boolean>(false);
+
+	// Stats State
+	// TODO: needs to come from session context
+	const [timePlayed, setTimePlayed] = useState("5:03:10");
+	const [medianRun, setMedianRun] = useState("7.3");
+	const [makeRate, setMakeRate] = useState("34%");
+	const [shotPacing, setShotPacing] = useState("0:00:26");
+	const [gameType, setGameType] = useState("Free Play");
+	const [notes, setNotes] = useState(
+		"Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+	);
+
+	return (
+		<>
+			<SlideModal modalVisible={visible} setModalVisible={setVisible}>
+				<View style={styles.container}>
+					<Text style={styles.header}>Afternoon Session</Text>
+					<Image
+						source={{ uri: "https://picsum.photos/200" }}
+						style={styles.image}
+					/>
+					<View style={styles.statsContainer}>
+						<View style={styles.statItem}>
+							<Text style={styles.statLabel}>TIME PLAYED</Text>
+							<Text style={styles.statValue}>{timePlayed}</Text>
+						</View>
+						<View style={styles.statItem}>
+							<Text style={styles.statLabel}>MEDIAN RUN</Text>
+							<Text style={styles.statValue}>{medianRun}</Text>
+						</View>
+						<View style={styles.statItem}>
+							<Text style={styles.statLabel}>MAKE RATE</Text>
+							<Text style={styles.statValue}>{makeRate}</Text>
+						</View>
+						<View style={styles.statItem}>
+							<Text style={styles.statLabel}>SHOT PACING</Text>
+							<Text style={styles.statValue}>{shotPacing}</Text>
+						</View>
+					</View>
+					<Text style={styles.gameType}>{gameType}</Text>
+					<Text style={styles.notes}>{notes}</Text>
+				</View>
+			</SlideModal>
+			<Button title="show modal" onPress={() => setVisible(true)} />
+		</>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		padding: 20,
+		backgroundColor: "white",
+	},
+	header: {
+		fontSize: 24,
+		fontWeight: "bold",
+		marginBottom: 20,
+	},
+	image: {
+		width: "100%",
+		height: 200,
+		marginBottom: 20,
+	},
+	statsContainer: {
+		flexDirection: "row",
+		justifyContent: "space-around",
+		marginBottom: 20,
+	},
+	statItem: {
+		alignItems: "center",
+	},
+	statLabel: {
+		fontSize: 16,
+		color: "grey",
+	},
+	statValue: {
+		fontSize: 18,
+		fontWeight: "bold",
+	},
+	gameType: {
+		fontSize: 18,
+		marginBottom: 10,
+	},
+	notes: {
+		fontSize: 16,
+		color: "grey",
+	},
+});

src/component/modals/slide-modal.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Modal, View } from "react-native";
+
+import { modal } from "../../styles";
+
+export default function SlideModal({
+	modalVisible,
+	setModalVisible,
+	children,
+}) {
+	return (
+		<Modal
+			animationType="slide"
+			transparent={true}
+			visible={modalVisible}
+			onRequestClose={() => {
+				setModalVisible(!modalVisible);
+			}}
+		>
+			<View style={modal.alignModalContainer}>
+				<View style={modal.modalView}>{children}</View>
+			</View>
+		</Modal>
+	);
+}

src/screens/session.tsx

@@ -7,6 +7,7 @@ import {
 import BarGraph from "../component/charts/bar-graph/bar-graph";
 import ChartContainer from "../component/charts/container/chart-container";
 import LineGraph from "../component/charts/line-graph/line-graph";
+import SessionDetails from "../component/modals/session-details";
 
 export default function SessionScreen() {
 	return (
@@ -16,6 +17,7 @@ export default function SessionScreen() {
 				data={graph_data_two_measures}
 				ChartComponent={BarGraph}
 			/>
+			<SessionDetails />
 		</View>
 	);
 }

src/styles.ts

@@ -1,5 +1,6 @@
+import Constants from "expo-constants";
+import { Platform, StyleSheet } from "react-native";
 // GLOBAL STYLES
-import { StyleSheet } from "react-native";
 
 export const globalInputStyles = StyleSheet.create({
 	input: {
@@ -28,6 +29,13 @@ export const globalInputStyles = StyleSheet.create({
 		borderRadius: 4,
 	},
 });
+
+let STATUS_BAR_HEIGHT: number;
+
+Platform.OS === "android"
+	? (STATUS_BAR_HEIGHT = 24)
+	: (STATUS_BAR_HEIGHT = Constants.statusBarHeight | 24);
+
 // COLORS:
 // can be made more granular to specify utility (ex: fontColors vs backgroundColors)
 export const colors = {
@@ -59,3 +67,29 @@ export const shadows = {
 		elevation: 3,
 	},
 };
+
+export const modal = StyleSheet.create({
+	alignModalContainer: {
+		flex: 1,
+		justifyContent: "flex-start",
+		alignItems: "flex-end",
+		marginTop: STATUS_BAR_HEIGHT ?? 54,
+	},
+	modalView: {
+		backgroundColor: "white",
+		height: "90%",
+		width: "100%",
+		borderTopRightRadius: 20,
+		borderTopLeftRadius: 20,
+	},
+	columnText: {
+		fontSize: 18,
+		color: colors.themeBrown,
+		fontWeight: "600",
+	},
+	columnIcon: {
+		fontSize: 25,
+		color: colors.themeBrown,
+		fontWeight: "500",
+	},
+});