componetize session

This commit is contained in:
Loewy 2024-02-22 11:24:18 -08:00
parent 7da14dbb6c
commit 44d2402f4b
2 changed files with 36 additions and 13 deletions

View File

@ -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;

View File

@ -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,