132 lines
3.4 KiB
TypeScript
132 lines
3.4 KiB
TypeScript
|
|
import {
|
|
View,
|
|
Dimensions,
|
|
StyleSheet,
|
|
} from 'react-native';
|
|
|
|
import React from 'react';
|
|
|
|
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
|
import { Text, Button } from "@ui-kitten/components";
|
|
import { appTheme } from "../theme";
|
|
import { Property } from '../types/property';
|
|
|
|
import Row from './Row';
|
|
|
|
const LISTMARGIN = 10;
|
|
const WIDTH = Dimensions.get("screen").width - LISTMARGIN * 2;
|
|
|
|
const CardInformation = ({ property}:{property: Property}) => {
|
|
return (
|
|
<View
|
|
style={styles.informationContainer}>
|
|
|
|
{/* Property text data - Row component imported */}
|
|
<Row
|
|
style={styles.rowJustification}>
|
|
|
|
<Text category={"h6"}>
|
|
${property.rentLow.toLocaleString()} -{" "}
|
|
{property.rentHigh.toLocaleString()}
|
|
</Text>
|
|
<MaterialCommunityIcons
|
|
name="heart-outline"
|
|
color={appTheme["color-primary-500"]}
|
|
size={24}/>
|
|
</Row>
|
|
|
|
<Text category={"p1"}>
|
|
{property.bedroomLow.toLocaleString()} -{" "}
|
|
{property.bedroomHigh.toLocaleString()} Beds
|
|
</Text>
|
|
|
|
<Text category={"p1"} style={styles.defaultMarginTop}>
|
|
{property.name}
|
|
</Text>
|
|
|
|
<Text category={"p1"}>
|
|
{property.street}
|
|
</Text>
|
|
|
|
<Text category={"p1"}>
|
|
{property.city}, {property.state}, {property.zip}
|
|
</Text>
|
|
|
|
<Text category={"p1"} style={styles.defaultMarginTop}>
|
|
{property.tags.map((tag, index) =>
|
|
index === property.tags.length - 1 ? tag : tag + ", "
|
|
//looping (mapping) through the tags and comparing the index (i) or position of the loop to the number of propertys in the array. If its less than the length minus 1, we need to add a comma and a space after the word.
|
|
// ? means if true
|
|
// : means else
|
|
// expression after else could be simplified with `${tag}, `
|
|
)}
|
|
</Text>
|
|
|
|
{/* Button data - Row component imported */}
|
|
|
|
<Row
|
|
style={{
|
|
marginTop: 5,
|
|
justifyContent: "space-between"
|
|
}}>
|
|
|
|
<Button
|
|
appearance={"ghost"}
|
|
style={[
|
|
styles.button,
|
|
{ borderColor: appTheme["color-primary-500"]},
|
|
]}
|
|
size="medium"
|
|
onPress={() => console.log("email the property manager")}>
|
|
Email
|
|
</Button>
|
|
|
|
<Button
|
|
style={[
|
|
styles.button,
|
|
{ borderColor: appTheme["color-primary-500"]},
|
|
]}
|
|
size="medium"
|
|
onPress={() => console.log("call the property manager")}>
|
|
Call
|
|
</Button>
|
|
|
|
{/* Calling the buttontest component and passing it props */}
|
|
{/* <ButtonTest
|
|
onPress={() => console.log("testing the new button")}
|
|
title='Test'
|
|
style={{
|
|
|
|
}}
|
|
/> */}
|
|
|
|
</Row>
|
|
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default CardInformation
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
|
|
button: {
|
|
width: "49%",
|
|
},
|
|
defaultMarginTop: {
|
|
marginTop: 5
|
|
},
|
|
rowJustification: {
|
|
justifyContent: "space-between"
|
|
},
|
|
informationContainer: {
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 5,
|
|
borderColor: "#d3d3d3",
|
|
borderBottomLeftRadius: 5,
|
|
borderBottomRightRadius: 5,
|
|
borderWidth: 1,
|
|
}
|
|
}) |