Notifications Refactor

components/organisms/Cards/NotificationCard.js

@@ -1,14 +1,72 @@
-import { StyleSheet, Text, View } from 'react-native'
+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 }) => {
+
 
-const NotificationCard = () => {
   return (
-    <View>
-      <Text>NotificationCard</Text>
+    <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({})
+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
+  }
+})

screens/CategoryPage.js

@@ -0,0 +1,30 @@
+import { StyleSheet, Text, View,SafeAreaView  } from 'react-native'
+import React from 'react'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import NewscoutCenteredTitleHeader from '../components/organisms/Headers/NewscoutCenteredTitleHeader'
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
+import { capitalize } from '../utils/Constants/functions'
+import colors from '../theme/colors'
+
+
+const CategoryPage = ({ navigation, route }) => {
+    const {
+        category
+    } = route.params
+
+    return (
+        <SafeAreaView>
+            <NewscoutCenteredTitleHeader title={capitalize(category)} backButtonShown onBackClick={() => navigation.goBack()}>
+
+                <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
+                    <MaterialIcon name='list' color={colors.primaryColor} size={30} />
+                </TouchableWithoutFeedback>
+            </NewscoutCenteredTitleHeader>
+            <Text>{capitalize(category) }</Text>
+        </SafeAreaView>
+    )
+}
+
+export default CategoryPage
+
+const styles = StyleSheet.create({})