Fixed Vertical Card Width

src/components/molecules/Cards/VerticalNewsCard.js

@@ -5,57 +5,82 @@ import images from '../../../assets/images/images'
 import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
 import fonts from '../../../constants/fonts'
 import { ThemeContext } from '../../../context/theme.context'
+import { getTimestamp } from '../../../constants/functions'
+import BookmarkButton from '../../atoms/Buttons/BookmarkButton'
+import ShareButton from '../../atoms/Buttons/ShareButton'
 
 
-const VerticalNewsCard = ({ image, headline, tagline, style, onPress }) => {
+const VerticalNewsCard = ({ image, headline, tagline, style, timestamp, onPress }) => {
 
     const theme = useContext(ThemeContext)
     const currentTheme = theme.state.theme
 
     const styles = StyleSheet.create({
         cardContainer: {
-            width: 'auto',
-            maxWidth: horizontalScale(210),
-            backgroundColor: currentTheme === 'light' ? colors().white : colors().black_variant ,
-            borderRadius: moderateScale(4),
-            height: verticalScale(275),
+            width: horizontalScale(200),
+            maxWidth: horizontalScale(200),
+            backgroundColor: currentTheme === 'light' ? colors().white : colors().black_variant,
+            borderRadius: moderateScale(16),
+            height: '100%',
             maxHeight: verticalScale(300),
             marginRight: horizontalScale(16),
-            paddingBottom: verticalScale(24),
+            // paddingBottom: verticalScale(24),
             elevation: 4
         },
-        textContainer: {
-            width: horizontalScale(210),
-            maxWidth: screenWidth,
-            height: "50%",
-            paddingHorizontal: horizontalScale(14),
-            paddingVertical: verticalScale(8)
-        },
+
         imagesContainer: {
             width: '100%',
-            height: '60%'
+            height: '50%'
 
         },
         image: {
-            borderRadius: moderateScale(4),
+            borderRadius: moderateScale(16),
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
             width: '100%',
             height: '100%'
         },
         headline: {
-            fontFamily: fonts.type.medium,
-            textDecorationLine: 'underline',
-            fontSize: 14,
-            color: colors().recessive ,
-            paddingBottom: 8
+            fontFamily: fonts.type.semibold,
+            fontSize: moderateScale(13),
+            color: colors().recessive,
+            paddingBottom: 4,
+            // width: '100%'
         },
-        tagline: {
-            fontSize: 12,
+        // tagline: {
+        //     fontSize: 12,
+        //     fontFamily: fonts.type.regular,
+        //     height: 'auto',
+        //     maxHeight: '25%',
+        //     overflow: 'hidden',
+        //     color: colors().recessive
+
+        // },
+        descriptorContainer: {
+            flexDirection: 'row',
+            // padding: moderateScale(16),
+            justifyContent: 'space-between',
+            // alignItems: 'baseline'
+        },
+        timeDescriptor: {
+            color: colors().recessive_variant,
             fontFamily: fonts.type.regular,
-            maxHeight: '40%',
-            overflow: 'hidden',
-            color: colors().recessive
-            
+            fontSize: moderateScale(12)
+        },
+        utilButtons: {
+            flexDirection: 'row',
+            gap: horizontalScale(8)
+        },
+        detailsContainer: {
+            flexDirection: 'column',
+            paddingHorizontal: horizontalScale(14),
+            paddingVertical: verticalScale(8),
+            justifyContent: 'space-between',
+            alignItems: 'stretch',
+            height: '47.5%',
+            maxHeight: '50%'
         }
+
     })
     return (
         <TouchableWithoutFeedback onPress={onPress}>
@@ -63,9 +88,18 @@ const VerticalNewsCard = ({ image, headline, tagline, style, onPress }) => {
                 <View style={styles.imagesContainer}>
                     <Image source={image ?? images.verticalCard} style={styles.image} />
                 </View>
-                <View style={styles.textContainer}>
+                <View style={styles.detailsContainer}>
+
                     <Text style={styles.headline}> {headline}</Text>
-                    <Text style={styles.tagline}>{tagline }</Text>
+                    {/* <Text style={styles.tagline}>{tagline}</Text> */}
+
+                    <View style={styles.descriptorContainer}>
+                        <Text style={styles.timeDescriptor}>{getTimestamp(timestamp)}</Text>
+                        <View style={styles.utilButtons}>
+                            <BookmarkButton size={20} onPress={true} />
+                            <ShareButton size={20} onPress={true} />
+                        </View>
+                    </View>
                 </View>
             </View>
         </TouchableWithoutFeedback>