React-Nav-Melon/components/organisms/Cards/HorizontalNewsCard.js

import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import React from 'react'
import metrics from '../../../theme/metrics'
import fonts from '../../../theme/fonts'
import colors from '../../../theme/colors'
import images from '../../../assets/images/images'
import BookmarkButton from '../Buttons/BookmarkButton'
import ShareButton from '../Buttons/ShareButton'


const HorizontalNewsCard = ({ style, headline, tagline, category, timestamp, image, onPress }) => {
    return (
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={[styles.cardContainer, style]}>
                <View style={styles.textContainer}>
                    <View>
                    <Text style={styles.headline}> {headline ?? "Battlegrounds Mobile India iOS release date"}</Text>
                    <Text style={styles.tagline}>{tagline ?? "government is the people, for the people, by the people but the people are retarded "}</Text>
                    </View>
                    <View style={styles.descriptors}>
                        <Text style={styles.categoryDescriptor}>{category ?? "Sports"}</Text>
                        <Text style={styles.timeDescriptor}>{timestamp ?? "27 mins ago"}</Text>
                    </View>
                </View>
                <View style={styles.imageContainer}>
                    <View style={styles.imageSub}>
                        <Image source={image ?? images.horizontalCard} style={{aspectRatio: 0.9}} />
                    </View>
                    <View style={styles.utilButtons}>
                        <BookmarkButton onPress={true} />
                        <ShareButton onPress={true}/>
                    </View>
                </View>
            </View>
        </TouchableWithoutFeedback>
    )
}

export default HorizontalNewsCard

const styles = StyleSheet.create({
    cardContainer: {
        width: 'auto',
        maxWidth: metrics.screenWidth,
        height: fonts.getSize(190),
        backgroundColor: colors.white,
        borderRadius: fonts.getSize(4),
        flexDirection: 'row',
        // paddingBottom:fonts.getSize(24)
    },
    imageContainer: {
        width: "45%",
        
    },
    textContainer: {
        width: "55%",
        paddingVertical: fonts.getSize(8),
        paddingLeft: fonts.getSize(16),
        justifyContent:'flex-start',
        gap:fonts.getSize(12)
    },
    headline: {
        fontFamily: fonts.type.medium,
        textDecorationLine: 'underline',
        fontSize: fonts.getSize(16),
        color: colors.black
    },
    tagline: {
        fontSize: fonts.getSize(12),
        fontFamily: fonts.type.regular,
        maxHeight: '40%',
        overflow: 'hidden',
        
    },
    descriptors: {
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
    categoryDescriptor: {
        fontFamily: fonts.type.light
    },
    timeDescriptor: {
        fontFamily: fonts.type.light
    },
    imageSub:{
        alignItems:'center',
        justifyContent:'center',
        padding: fonts.getSize(14),
        paddingBottom: 0
    },
    utilButtons:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around'
    }
})