2020-11-26 15:37:58 +01:00

100 lines
2.4 KiB
JavaScript

//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', { CompanyDetails: 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;