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

import { Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import fonts from '../../../theme/fonts'
import images from '../../../assets/images/images'
import colors from '../../../theme/colors'
import { getTimestamp } from '../../../utils/Constants/functions'


const PROFILE_IMAGE = 52
const NOTIFICATION_IMAGE = PROFILE_IMAGE

const NotificationCard = ({ navigation, profileImage, tagline, headline, timestamp, image }) => {


  return (
    <View style={styles.cardContainer}>
      <View style={{flexDirection:'row',alignItems:'center'}}>
        <Image source={images.imageCard ?? profileImage} style={styles.profileIcon} />
        <View style={{paddingLeft: 8}}>
          <Text style={styles.headline}>{ headline ?? "semina is now following you"}</Text>
          <Text style={styles.tagline}>{tagline ?? "semi has posted new politics news"}</Text>
          <Text style={styles.timestamp}>{getTimestamp(timestamp) ?? getTimestamp("2023-06-16T11:57:52.458032Z")}</Text>
        </View>
      </View>
      <View>
        { image ? <Image source={images.horizontalCard ?? image} style={styles.notificationImage} /> : <></>}
      </View>

    </View>
  )
}

export default NotificationCard

const styles = StyleSheet.create({
  cardContainer: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 8,
    height: 88,
    backgroundColor: colors.white,
    borderRadius: 16
  },
  profileIcon: {
    height: PROFILE_IMAGE,
    width: PROFILE_IMAGE,
    borderRadius: PROFILE_IMAGE,

  },
  notificationImage: {
    height: NOTIFICATION_IMAGE,
    width: NOTIFICATION_IMAGE,
    borderRadius: 8,
  },
  headline:{
    fontFamily: fonts.type.bold,
    color:colors.grayShade_100,
    fontSize: fonts.getSize(12)
  },
  tagline:{
    fontFamily: fonts.type.regular,
    color:colors.grayShade_200,
    fontSize: 12
  },
  timestamp:{
    fontFamily: fonts.type.light,
    color:colors.grayShade_300,
    fontSize: 12
  }
})