componetize session

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;

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}>
+				<SessionHeader sessionTitle={sessionTitle} date={date} />
-					<Text style={styles.header}>{sessionTitle}</Text>
-					<Text>{date}</Text>
-				</View>
 				<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,