reactNative

ReactJS/Native/AlfaPrentice/App/Cards/CompanyResultCard.js

@@ -0,0 +1,100 @@
+//Modules
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Component, Button } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+//Components
+
+function Navigate(props) {
+    const navigation = useNavigation();
+    return(
+        <TouchableOpacity style={Styles.Btn} onPress = {() => navigation.navigate('Companyprofile', { Appel: props.Details })}>
+            <Text style={Styles.white}>Bekijk bedrijf</Text>
+        </TouchableOpacity>
+    )
+}
+
+class CompanyResultCard extends React.Component{
+    constructor (props) {
+        super(props);
+        this.state = {
+
+        }
+        
+    }
+    
+
+    render() {
+        
+        return (
+            <ScrollView>
+            <View style={Styles.ResultCard}>
+                <View style={Styles.Row}>
+                    <Text style={Styles.HeroHeading}>Bedrijfsnaam 1</Text>
+                   <Navigate Details = {this.props.details}/>
+                </View>
+                <View style={Styles.ContentRow}>
+                    <Text>Locatie: Groningen</Text>
+                    <Text>Opleding: AO</Text>
+                </View>
+                <View style={Styles.ContentRowRa}>
+                    <Text>Beschikbaarheid: 2 plekken over</Text>
+                </View>
+                
+            </View>
+            <View style={Styles.HR}/>
+            </ScrollView>
+        )
+    }
+}
+
+
+
+const Styles = StyleSheet.create ({
+    ResultCard: {
+        padding: 30,
+    },
+    HeroHeading: {
+        color: "#DE0000",
+        fontSize: 20,
+    },
+    Btn: {
+        backgroundColor: '#DE0000',
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        borderRadius: 5,
+       
+    },
+    white: {
+        color: '#ffffff',
+    },
+    Row: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between'
+    },
+    ContentRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        marginTop: 15,
+    },
+    ContentRowRa: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end',
+        marginTop: 15,
+    },
+    HR: {
+        height: 2,
+        backgroundColor: '#DE0000',
+        
+    }
+})
+
+export default CompanyResultCard;