98 lines
2.5 KiB
JavaScript
98 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import { withNavigation } from '@react-navigation/compat';
|
|
import PropTypes from 'prop-types';
|
|
import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
|
|
import { Block, Text, theme } from 'galio-framework';
|
|
|
|
import { argonTheme } from '../constants';
|
|
|
|
|
|
class Card extends React.Component {
|
|
render() {
|
|
const { navigation, item, horizontal, full, style, ctaColor, imageStyle } = this.props;
|
|
|
|
const imageStyles = [
|
|
full ? styles.fullImage : styles.horizontalImage,
|
|
imageStyle
|
|
];
|
|
const cardContainer = [styles.card, styles.shadow, style];
|
|
const imgContainer = [styles.imageContainer,
|
|
horizontal ? styles.horizontalStyles : styles.verticalStyles,
|
|
styles.shadow
|
|
];
|
|
|
|
return (
|
|
<Block row={horizontal} card flex style={cardContainer}>
|
|
<TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
|
|
<Block flex style={imgContainer}>
|
|
<Image source={{uri: item.image}} style={imageStyles} />
|
|
</Block>
|
|
</TouchableWithoutFeedback>
|
|
<TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
|
|
<Block flex space="between" style={styles.cardDescription}>
|
|
<Text size={14} style={styles.cardTitle}>{item.title}</Text>
|
|
<Text size={12} muted={!ctaColor} color={ctaColor || argonTheme.COLORS.ACTIVE} bold>{item.cta}</Text>
|
|
</Block>
|
|
</TouchableWithoutFeedback>
|
|
</Block>
|
|
);
|
|
}
|
|
}
|
|
|
|
Card.propTypes = {
|
|
item: PropTypes.object,
|
|
horizontal: PropTypes.bool,
|
|
full: PropTypes.bool,
|
|
ctaColor: PropTypes.string,
|
|
imageStyle: PropTypes.any,
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
backgroundColor: theme.COLORS.WHITE,
|
|
marginVertical: theme.SIZES.BASE,
|
|
borderWidth: 0,
|
|
minHeight: 114,
|
|
marginBottom: 16
|
|
},
|
|
cardTitle: {
|
|
flex: 1,
|
|
flexWrap: 'wrap',
|
|
paddingBottom: 6
|
|
},
|
|
cardDescription: {
|
|
padding: theme.SIZES.BASE / 2
|
|
},
|
|
imageContainer: {
|
|
borderRadius: 3,
|
|
elevation: 1,
|
|
overflow: 'hidden',
|
|
},
|
|
image: {
|
|
// borderRadius: 3,
|
|
},
|
|
horizontalImage: {
|
|
height: 122,
|
|
width: 'auto',
|
|
},
|
|
horizontalStyles: {
|
|
borderTopRightRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
},
|
|
verticalStyles: {
|
|
borderBottomRightRadius: 0,
|
|
borderBottomLeftRadius: 0
|
|
},
|
|
fullImage: {
|
|
height: 215
|
|
},
|
|
shadow: {
|
|
shadowColor: theme.COLORS.BLACK,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowRadius: 4,
|
|
shadowOpacity: 0.1,
|
|
elevation: 2,
|
|
},
|
|
});
|
|
|
|
export default withNavigation(Card); |