49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import { View, StyleSheet, Text } from 'react-native';
|
|
import EntypoIcon from "react-native-vector-icons/Entypo";
|
|
import AntDesignIcon from "react-native-vector-icons/AntDesign";
|
|
import Fa5Icon from "react-native-vector-icons/FontAwesome5";
|
|
|
|
const IconCard = props => {
|
|
let IconClass;
|
|
if (props.iconType === "AntDesign") {
|
|
IconClass = AntDesignIcon;
|
|
}
|
|
else if (props.iconType === "FontAwesome5") {
|
|
IconClass = Fa5Icon;
|
|
} else if (props.iconType === "Entypo") {
|
|
IconClass = EntypoIcon;
|
|
}
|
|
|
|
return (
|
|
<View style={styles.card}>
|
|
|
|
<View style={{ paddingLeft: 20 }}>
|
|
<Text style={{ color: 'white', fontSize: props.fontSize, textAlign: "center" }}> {props.value}</Text>
|
|
</View>
|
|
<View style={{ alignItems: 'center', justifyContent: 'center', paddingLeft: 20 }}>
|
|
<IconClass style={{ color: 'white', fontSize: 30 }} name={props.iconName} />
|
|
<Text style={{ color: 'white', marginTop: 5 }}> {props.label}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
flexDirection: 'row',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
margin: 5,
|
|
padding: 5,
|
|
borderRadius: 6,
|
|
justifyContent: 'space-between',
|
|
}
|
|
});
|
|
|
|
IconCard.defaultProps = {
|
|
fontSize: 65,
|
|
flex: 1
|
|
};
|
|
|
|
export default IconCard;
|