blogrecommendationCard
unknown
plain_text
a year ago
3.0 kB
5
Indexable
import React from 'react' import { ImageBackground, Pressable, StyleSheet, Text, View } from "react-native" import { height, width } from "../../constants/constants" import { colors } from "../../theme" import { Separator } from "../common/Separator" import { BlogDetailsComponent } from "../common/BlogDetailsComponent" import fonts from '../../assets/fonts' import { CategoryIndicator } from '../common/CategoryIndicator' interface BlogRecommendationCardPropTypes { bannerImage: string; category: string; title: string; description: string; authorImage: string; authorName: string; readTime: string; uploadDate: string; onPress: (item?: any) => void | any; cardBackgroundColor?: string; } export const BlogRecommendationCard: React.FC<BlogRecommendationCardPropTypes> = ({ bannerImage, category, title, description, authorImage, authorName, readTime, uploadDate, onPress, cardBackgroundColor }) => (<View style={{ width: width, }}> <Pressable style={styles.pressableCardStyles} onPress={() => onPress()}> <ImageBackground source={{ uri: bannerImage }} borderTopLeftRadius={16} borderTopRightRadius={16} style={styles.blogBgImage} resizeMode='cover'> <CategoryIndicator title={category} /> </ImageBackground> <View style={cardBackgroundColor ? { ...styles.blogContainer, backgroundColor: cardBackgroundColor } : styles.blogContainer}> <Text style={styles.blogTitle}>{title}</Text> <Text style={styles.blogDescription}>{description}</Text> <Separator color={colors.cE8E8E8} marginApart={16} /> <BlogDetailsComponent authorImage={authorImage} authorName={authorName} readTime={readTime} uploadDate={uploadDate} /> </View> </Pressable> </View>) const styles = StyleSheet.create({ blogBgImage: { height: height * .268, padding: 16, alignItems: 'flex-start', }, blogContainer: { padding: 16, backgroundColor: colors.cf9f9f9, borderBottomLeftRadius: 16, borderBottomRightRadius: 16, width: '100%', }, blogTitle: { fontFamily: fonts.PoppinsRegular, fontWeight: '500', fontSize: 16, color: '#222222', lineHeight: 20 }, blogDescription: { fontFamily: fonts.PoppinsRegular, fontWeight: '400', fontSize: 12, color: colors.c666666, marginTop: 8, marginBottom: 4, }, pressableCardStyles: { position: 'relative', width:width*.88, alignSelf: 'center' } })
Editor is loading...
Leave a Comment