Created Person Card Component

src/components/molecules/Cards/PersonCard.js

@@ -0,0 +1,99 @@
+import { Image, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
+import React, { useContext } from 'react'
+import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
+import { ThemeContext } from '../../../context/theme.context'
+import colors from '../../../constants/colors'
+import fonts from '../../../constants/fonts'
+import images from '../../../assets/images/images'
+
+const PersonCard = props => {
+
+    const theme = useContext(ThemeContext)
+    const currentTheme = theme.state.theme
+    const {
+        navigation,
+        route,
+        personName,
+        followerCount,
+        image,
+        onButtonPress,
+        buttonText
+    } = props
+
+    const styles = StyleSheet.create({
+        container:{
+            borderRadius: moderateScale(16),
+            elevation: 2,
+            minWidth: '100%',
+            maxWidth: horizontalScale(340),
+            backgroundColor: currentTheme === 'light' ? colors().white : colors().black_variant,
+            minHeight: verticalScale(70),
+            paddingHorizontal: horizontalScale(12),
+            paddingVertical: horizontalScale(12),
+            flexDirection: 'row',
+            justifyContent:'space-between',
+            alignItems: 'center'
+
+        },
+        details:{
+          alignItems:'center',
+          justifyContent:'center',
+          flexDirection:'row',
+          gap: horizontalScale(12)
+        },
+        
+        image:{
+          backgroundColor: colors().grayShade_400,
+          borderRadius: 64,
+          height:64,
+          width: 64,
+        },
+        buttonText:{
+          paddingVertical: verticalScale(8),
+          paddingHorizontal: horizontalScale(14),
+          backgroundColor: colors().primaryColor,
+          borderRadius: moderateScale(16),
+          color: colors().white,
+          fontFamily: fonts.type.semibold
+        },
+        personName:{
+          fontFamily:fonts.type.medium,
+          fontSize: moderateScale(16),
+          color: colors().primaryColor,
+        },
+        followerCount:{
+          fontFamily: fonts.type.regular,
+          color: colors().recessive
+
+        }
+    })
+
+    return (
+    <View style={styles.container}>
+      <View style={styles.details}>
+          <View style={styles.imageContainer}>
+            <Image source={image ?? images.horizontalCard} style={styles.image} />
+          </View>
+        <View style={styles.titleContainer}>
+          {
+            personName ?  
+            <Text style={styles.personName}>{personName}</Text> :
+            <Text style={styles.emptyPersonName}></Text>
+
+          }
+          {
+            followerCount ? 
+            <Text style={styles.followerCount}>{followerCount} followers</Text> : 
+            <Text style={styles.emptyfollowerCount}></Text>
+          }
+        </View>
+      </View>
+      <TouchableOpacity contentContainerStyle={styles.button} onPress={onButtonPress}>
+        <Text style={styles.buttonText}>{buttonText ?? "Button"}</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export default PersonCard
+