From 44d2402f4bcd3f0f3f03af5d08ee401d16ed2798 Mon Sep 17 00:00:00 2001
From: Loewy <loewy@chainstarters.com>
Date: Thu, 22 Feb 2024 11:24:18 -0800
Subject: [PATCH] componetize session

---
 .../video-details/video-details-header.tsx    | 34 +++++++++++++++++++
 src/screens/video-stack/video-details.tsx     | 15 ++------
 2 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 src/component/video-details/video-details-header.tsx

diff --git a/src/component/video-details/video-details-header.tsx b/src/component/video-details/video-details-header.tsx
new file mode 100644
index 0000000..2ec9720
--- /dev/null
+++ b/src/component/video-details/video-details-header.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+// Type assumes preformatted date
+type SessionHeaderProps = {
+	sessionTitle: string;
+	date: string;
+};
+
+const SessionHeader: React.FC<SessionHeaderProps> = ({
+	sessionTitle,
+	date,
+}) => {
+	return (
+		<View style={styles.headerSection}>
+			<Text style={styles.header}>{sessionTitle}</Text>
+			<Text>{date}</Text>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	headerSection: {
+		paddingHorizontal: 38,
+		paddingTop: 17,
+		paddingBottom: 14,
+	},
+	header: {
+		fontSize: 24,
+		fontWeight: "bold",
+	},
+});
+
+export default SessionHeader;
diff --git a/src/screens/video-stack/video-details.tsx b/src/screens/video-stack/video-details.tsx
index 1067313..d95ea3f 100644
--- a/src/screens/video-stack/video-details.tsx
+++ b/src/screens/video-stack/video-details.tsx
@@ -14,6 +14,7 @@ import StatList from "../../component/video-details/video-stat-list";
 import Session from "../../assets/sample_session.png";
 import Splash from "../../assets/splash.png";
 import BackHeader from "../../component/headers/back-header";
+import SessionHeader from "../../component/video-details/video-details-header";
 import { borders, colors } from "../../styles";
 
 export default function VideoDetails({ navigation }) {
@@ -47,10 +48,7 @@ export default function VideoDetails({ navigation }) {
 				showsVerticalScrollIndicator={false}
 				contentContainerStyle={styles.scrollContainer}
 			>
-				<View style={styles.headerSection}>
-					<Text style={styles.header}>{sessionTitle}</Text>
-					<Text>{date}</Text>
-				</View>
+				<SessionHeader sessionTitle={sessionTitle} date={date} />
 				<ImageWithFallback
 					// TODO: #134 when data comes from be needs to be passed as source={{ uri: image }}
 					source={Session}
@@ -84,15 +82,6 @@ const styles = StyleSheet.create({
 		backgroundColor: "white", // TODO #125 -- this color should not be set but implicitly inherit from theme
 		paddingBottom: 20, // guarantees some space at bottom of scrollable views
 	},
-	headerSection: {
-		paddingHorizontal: 38,
-		paddingTop: 17,
-		paddingBottom: 14,
-	},
-	header: {
-		fontSize: 24,
-		fontWeight: "bold",
-	},
 	image: {
 		width: "100%",
 		height: 248,