[home] Update content card

package.json

@@ -20,7 +20,7 @@
     "@mui/material": "^5.14.13",
     "@mui/styled-engine-sc": "^6.0.0-alpha.1",
     "@mui/system": "^5.14.13",
-    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-async-storage/async-storage": "^1.18.2",
     "@react-native-community/datetimepicker": "7.2.0",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/material-bottom-tabs": "^6.2.17",

src/app/(tabs)/author/index.tsx

@@ -6,7 +6,6 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import BackButton from '../../../components/BackButton/BackButton';
-import ContentCard from '../../../components/ContentCard/ContentCard';
 import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine';
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import {

src/app/(tabs)/home/index.tsx

@@ -123,6 +123,7 @@ function HomeScreen() {
                   key={story.title}
                   title={story.title}
                   author={story.author_name}
+                  authorImage={story.author_image}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',
@@ -151,6 +152,7 @@ function HomeScreen() {
                   key={story.title}
                   title={story.title}
                   author={story.author_name}
+                  authorImage={story.author_image}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',

src/app/(tabs)/home/styles.ts

@@ -22,6 +22,7 @@ const styles = StyleSheet.create({
   scrollView: {
     marginBottom: 20,
     flexGrow: 0,
+    padding: 8,
   },
   headerContainer: {
     flexDirection: 'row',

src/app/(tabs)/story/index.tsx

@@ -69,8 +69,6 @@ function StoryScreen() {
           ref={scrollRef}
           showsVerticalScrollIndicator={false}
         >
-          {/* <Image style={styles.image} source={{ uri: story.featured_media }} /> */}
-
           <Text style={styles.title}>{story?.title}</Text>
           <TouchableOpacity
             onPress={() => {

src/app/(tabs)/story/styles.ts

@@ -10,11 +10,6 @@ const styles = StyleSheet.create({
     paddingRight: 24,
     paddingTop: 48,
   },
-  image: {
-    width: '100%',
-    height: 153,
-    marginBottom: 16,
-  },
   authorImage: {
     backgroundColor: '#D9D9D9',
     width: 21,

src/components/ContentCard/ContentCard.tsx

@@ -4,6 +4,7 @@ import {
   Pressable,
   Text,
   View,
+  TouchableOpacity,
 } from 'react-native';
 
 import styles from './styles';
@@ -13,26 +14,78 @@ type ContentCardProps = {
   title: string;
   author: string;
   image: string;
+  authorImage: string;
   pressFunction: (event: GestureResponderEvent) => void;
 };
 
 function ContentCard({
   title,
   author,
   image,
+  authorImage,
   pressFunction,
 }: ContentCardProps) {
+  const saveStory = () => {
+    console.log("testing '+' icon does something for story " + title);
+  };
+
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.contentCard}>
-        <Image style={styles.image} source={{ uri: image }} />
+        <View style={{ flexDirection: 'row' }}>
+          <Image style={styles.image} source={{ uri: image }} />
+          <Image
+            style={styles.authors}
+            source={{
+              uri: 'https://gwn-uploads.s3.amazonaws.com/wp-content/uploads/2023/12/10090438/Angela-Trakoshis-100x100.jpg' /* change image for proper author when we can pull author images properly */,
+            }}
+          />
+        </View>
+
         <View style={styles.textContainer}>
           <Text style={[globalStyles.h3, styles.title]} numberOfLines={1}>
             {title}
           </Text>
-          <Text style={globalStyles.body1} numberOfLines={1}>
-            {author}
-          </Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <Text style={globalStyles.subtext} numberOfLines={1}>
+              By{'  '}
+            </Text>
+            <Text style={globalStyles.subHeading1} numberOfLines={1}>
+              {author}
+            </Text>
+          </View>
+          <View style={styles.buttons}>
+            <View>
+              <TouchableOpacity
+                onPress={() => null}
+                style={{ flexDirection: 'row' }}
+              >
+                <Image
+                  style={styles.reactions}
+                  source={require('./savedStoriesIcon.png')}
+                />
+                <Image
+                  style={styles.reactions}
+                  source={require('./savedStoriesIcon.png')}
+                />
+                <Image
+                  style={styles.reactions}
+                  source={require('./savedStoriesIcon.png')}
+                />
+                <View style={styles.reactionNumber}>
+                  <Text style={globalStyles.subtext}>
+                    14{/*change number to work*/}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            <TouchableOpacity onPress={() => saveStory()}>
+              <Image
+                style={{ width: 40, height: 40 }}
+                source={require('./savedStoriesIcon.png')}
+              />
+            </TouchableOpacity>
+          </View>
         </View>
       </View>
     </Pressable>

src/components/ContentCard/styles.ts

@@ -7,19 +7,63 @@ const styles = StyleSheet.create({
     marginRight: 20,
     flexDirection: 'column',
     justifyContent: 'space-between',
+    backgroundColor: '#FFF',
+    borderRadius: 6,
+    shadowColor: colors.black,
+    shadowOpacity: 0.5,
+    shadowOffset: { width: 0, height: 4 },
+    shadowRadius: 5,
+    elevation: 4,
   },
   image: {
+    margin: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
     height: 140,
     width: 148,
     backgroundColor: colors.lime,
     borderRadius: 4,
     marginBottom: 8,
   },
+  authors: {
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
+    borderWidth: 1,
+    backgroundColor: '#89CFF0',
+    borderColor: 'white',
+    marginTop: 15,
+    marginLeft: -45,
+    flexDirection: 'row',
+  },
   textContainer: {
-    width: 148,
+    width: 166,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingBottom: 10,
   },
   title: {
     marginBottom: 4,
+    padding: 0,
+  },
+  reactionNumber: {
+    marginLeft: 15,
+    marginTop: 10,
+  },
+  reactions: {
+    width: 20,
+    height: 20,
+    borderRadius: 20 / 2,
+    borderWidth: 1,
+    backgroundColor: '#89CFF0', //different per emoji reaction
+    borderColor: 'white',
+    marginTop: 10,
+    marginRight: -10,
+  },
+  buttons: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 5,
   },
 });
 

src/components/PreviewCard/PreviewCard.tsx

@@ -1,11 +1,11 @@
+import * as cheerio from 'cheerio';
 import {
   GestureResponderEvent,
   Image,
   Pressable,
   Text,
   View,
 } from 'react-native';
-import * as cheerio from 'cheerio';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';

src/queries/types.tsx

@@ -46,6 +46,7 @@ export interface StoryCard {
   title: string;
   author_name: string;
   featured_media: string;
+  author_image: string;
 }
 
 export interface Subgenre {