added session-card component

src/component/session-card/aggregate_stat.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+const AggregateStat = ({ aggregateStat, displayName, numberFormat }) => {
+	return (
+		<View>
+			<Text style={styles.statItem}>{displayName}</Text>
+			<Text style={styles.statValue}>
+				{aggregateStat}
+				{numberFormat}
+			</Text>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	statItem: {
+		fontSize: 10,
+		alignItems: "center",
+		fontWeight: "light",
+		color: "#666",
+	},
+	statValue: {
+		fontSize: 22,
+		fontWeight: "bold",
+	},
+});
+
+export default AggregateStat;

src/component/session-card/session-card.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Image, StyleSheet, View } from "react-native";
+import SessionFooter from "./session_footer";
+import SessionHeader from "./session_header";
+import SessionStats from "./session_stats";
+
+const StatsCard = ({
+	playerName,
+	location,
+	type,
+	makePercent,
+	medianRun,
+	duration,
+	shotPacing,
+	sessionName,
+	lastPlayed,
+	imageURL,
+	profileImageURL,
+	locationIconURL,
+}) => {
+	console.log(imageURL);
+	return (
+		<View style={styles.background}>
+			<View style={styles.card}>
+				<SessionHeader
+					playerName={playerName}
+					location={location}
+					type={type}
+					locationIconURL={locationIconURL}
+					profileImageURL={profileImageURL}
+				/>
+				<SessionStats
+					makePercent={makePercent}
+					medianRun={medianRun}
+					duration={duration}
+					shotPacing={shotPacing}
+				/>
+				<Image source={imageURL} style={styles.image} />
+				<SessionFooter sessionName={sessionName} lastPlayed={lastPlayed} />
+			</View>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	card: {
+		backgroundColor: "white",
+	},
+	image: {
+		width: "100%",
+		height: "50%",
+	},
+});
+
+export default StatsCard;

src/component/session-card/session_footer.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+const SessionFooter = ({ sessionName, lastPlayed }) => {
+	return (
+		<View>
+			<Text style={styles.sessionName}>{sessionName}</Text>
+			<Text style={styles.sessionDatetime}>{lastPlayed}</Text>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	sessionName: {
+		fontSize: 18,
+		fontWeight: "medium",
+		paddingTop: 5,
+		marginLeft: 16,
+		marginRight: 16,
+	},
+	sessionDatetime: {
+		fontSize: 10,
+		fontWeight: "light",
+		color: "#A3A3A3",
+		marginLeft: 16,
+		marginRight: 16,
+		marginBottom: 16,
+	},
+});
+
+export default SessionFooter;

src/component/session-card/session_header.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Image, StyleSheet, Text, View } from "react-native";
+
+const SessionHeader = ({
+	playerName,
+	location,
+	type,
+	locationIconURL,
+	profileImageURL,
+}) => {
+	return (
+		<View style={styles.headerContainer}>
+			<View style={styles.headerProfileImage}>
+				<Image
+					source={{ uri: profileImageURL }}
+					style={styles.headerProfileImage}
+				/>
+			</View>
+			<View style={styles.headerText}>
+				<Text style={styles.playerName}>{playerName}</Text>
+				<View style={styles.locationContainer}>
+					<Image source={{ uri: locationIconURL }} style={styles.icon} />
+					<Text style={styles.locationText}>{location}</Text>
+				</View>
+				<Text style={styles.gameType}>{type}</Text>
+			</View>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	headerContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		marginLeft: 16,
+		marginRight: 16,
+	},
+
+	headerProfileImage: {
+		width: 60,
+		height: 60,
+		resizeMode: "contain",
+	},
+
+	headerText: {
+		flexDirection: "column",
+		padding: 10,
+	},
+	playerName: {
+		fontSize: 24,
+		fontWeight: "bold",
+	},
+	locationContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	locationText: {
+		fontSize: 13,
+	},
+	gameType: {
+		fontSize: 13,
+	},
+	icon: {
+		width: 18,
+		height: 18,
+		resizeMode: "contain",
+	},
+});
+
+export default SessionHeader;

src/component/session-card/session_stats.tsx

@@ -0,0 +1,58 @@
+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;

src/screens/session-feed.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import sampleSessionImage from "../assets/sample_session.png";
+import StatsCard from "../component/session-card/session-card.tsx";
+
+const SessionFeed: React.FC = () => {
+	return (
+		<View style={styles.container}>
+			<StatsCard
+				playerName="Dean Machine"
+				location="Family Billiards, San Francisco"
+				type="Straight Pool"
+				makePercent="34"
+				medianRun="7.3"
+				duration="5:03:10"
+				shotPacing="0:00:26"
+				imageURL={sampleSessionImage}
+				sessionName="Dusting off the chalk"
+				lastPlayed="Today at 2:37pm"
+				profileImageURL="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-File.png"
+				locationIconURL="https://www.shutterstock.com/image-vector/blank-map-marker-vector-illustration-260nw-1150566347.jpg"
+			/>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "#f0f0f0", // Light gray background
+		alignItems: "center",
+	},
+});
+
+export default SessionFeed;