update

Native/AlfaPrentice/App/Layouts/DefaultLayout.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {View, Text, ScrollView} from 'react-native';
 
 //Components
-import {Header, Footer} from '../index';
+import {Header, Footer, Hero} from '../index';
 
 class DefaultLayout extends React.Component {
 constructor(props){
@@ -23,4 +23,23 @@ constructor(props){
     }
 }
 
-export default DefaultLayout;
+class UserProfileLayout extends React.Component {
+    constructor(props){
+        super(props);
+    }
+
+    render() {
+        return (
+            <View>
+            <ScrollView style={{marginBottom: 50,}}>
+                <Header/>
+                <Hero HeroHeading="Frits Haringa" HeroText="Student Applicatie en Mediaontwikkeling jaar 3"/>
+                {this.props.children} 
+            </ScrollView>
+            <Footer/>
+            </View>
+        );
+    }
+}
+
+export { DefaultLayout, UserProfileLayout };

Native/AlfaPrentice/App/Views/Profiles/Userfunctions/InternStatus.js

@@ -1,18 +1,48 @@
 //Modules
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, StyleSheet} from 'react-native';
 
 //Components
-import { DefaultLayout } from '../../../index';
+import { UserProfileLayout, Hero } from '../../../index';
 
 class InternStatus extends React.Component {
     render() {
         return (
-                <DefaultLayout>
-                    <Text>Status stage pagina</Text>
-                </DefaultLayout>
+                <UserProfileLayout>
+                    <Text style={Styles.H1}>Status stage pagina</Text>
+                    <View>
+                        <View style={Styles.StageInfoContainer}>
+                            <Text style={Styles.StageInfo}>Weekstaten</Text>
+                            <Text style={Styles.StageInfo}>303 van de 720 uur gelopen</Text>
+                        </View>
+                        <View style={Styles.StageInfoContainer}>
+                            <Text style={Styles.StageInfo}>Stage periode</Text>
+                            <Text style={Styles.StageInfo}>Stage eindigt over 79 dagen</Text>
+                        </View>
+                    </View>
+                </UserProfileLayout>
         )
     }
 }
 
+const Styles = StyleSheet.create({
+    H1: {
+        color: "#DE0000",
+        fontSize: 21,
+        textAlign: 'center',
+        marginVertical: 10,
+    },
+    StageInfoContainer: {
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: 30,
+        marginVertical: 10
+    },
+    StageInfo: {
+        fontSize: 12,
+    }
+})
+
 export default InternStatus;

Native/AlfaPrentice/App/index.js

@@ -1,7 +1,7 @@
 //Components
 import Header from './Header/Header';
 import Routes from './Router/Router';
-import DefaultLayout from './Layouts/DefaultLayout';
+import { DefaultLayout, UserProfileLayout} from './Layouts/DefaultLayout';
 import Hero from './Hero/Hero';
 import {HeroSearch} from './Hero/Hero';
 import CompanyResultcard from './Cards/CompanyResultCard';
@@ -33,6 +33,7 @@ export {
     Footer,
     ProfileLink,
     Cta,
+    UserProfileLayout
 }
 
 //Pages export