componetize session
This commit is contained in:
parent
7da14dbb6c
commit
44d2402f4b
34
src/component/video-details/video-details-header.tsx
Normal file
34
src/component/video-details/video-details-header.tsx
Normal 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;
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user