finished assignment1

CodyGarciaa · Sep 30, 2024 · 0d3fcac · 0d3fcac
1 parent 33c7f8f
commit 0d3fcac
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 32 deletions.
diff --git a/src/screens/PostScreen.tsx b/src/screens/PostScreen.tsx
@@ -1,4 +1,4 @@
-import { Text, View } from 'react-native';
+import { Image, Text, View } from 'react-native';
 import HeartIcon from '../../assets/heart-icon.svg';
 import ShareIcon from '../../assets/messenger-icon.svg';
 import ProfilePlaceholder from '../../assets/profile-placeholder-icon.svg';
@@ -7,37 +7,65 @@ import { styles } from './styles';
 export default function PostScreen() {
   return (
     <View style={styles.container}>
-      <ProfilePlaceholder />
-      <Text>rbeggs</Text>
-      <Text>September 19</Text>
-      <Text>
-        In response to the growing homelessness crisis in San Francisco, a local
-        nonprofit organization, Code Tenderloin, has launched a comprehensive
-        initiative aimed at providing long-term solutions for individuals
-        experiencing homelessness. The organization, founded in 2015, is
-        dedicated to addressing both immediate needs and underlying causes of
-        homelessness through a combination of shelter services, job training
-        programs, and mental health support. read more online:
-        https://www.codetenderloin.org/
-      </Text>
-      <Text>
-        Image URL:
-        'https://cdn.britannica.com/51/178051-050-3B786A55/San-Francisco.jpg'
-      </Text>
-      <HeartIcon />
-      <Text>256 Likes</Text>
-      <ShareIcon />
-      <ProfilePlaceholder />
-      <Text>philip_ye</Text>
-      <Text>September 20</Text>
-      <Text>
-        This organization is doing amazing work tackling the complex root causes
-        of the issue.
-      </Text>
-      <ProfilePlaceholder />
-      <Text>vppraggie</Text>
-      <Text>September 21</Text>
-      <Text>Thanks for sharing!</Text>
+      <View style={styles.post}>
+        <View style={styles.person_header}>
+          <View style={styles.name_profile}>
+            <ProfilePlaceholder />
+            <Text style={styles.username}>rbeggs</Text>
+          </View>
+          <Text style={styles.post_date}>September 19</Text>
+        </View>
+        <Text style={styles.da_text}>
+          In response to the growing homelessness crisis in San Francisco, a
+          local nonprofit organization, Code Tenderloin, has launched a
+          comprehensive initiative aimed at providing long-term solutions for
+          individuals experiencing homelessness. The organization, founded in
+          2015, is dedicated to addressing both immediate needs and underlying
+          causes of homelessness through a combination of shelter services, job
+          training programs, and mental health support. read more online:
+          <Text style={styles.da_link}>https://www.codetenderloin.org/</Text>
+        </Text>
+        <Image
+          style={styles.da_image}
+          source={{
+            uri: 'https://cdn.britannica.com/51/178051-050-3B786A55/San-Francisco.jpg',
+          }}
+        />
+        {/* <Text>
+          Image URL:
+          'https://cdn.britannica.com/51/178051-050-3B786A55/San-Francisco.jpg'
+        </Text> */}
+        <View style={styles.interactions}>
+          <View style={styles.likes}>
+            <HeartIcon />
+            <Text style={styles.username}>256 Likes</Text>
+          </View>
+          <ShareIcon />
+        </View>
+      </View>
+
+      <View style={styles.comments}>
+        <View style={styles.person_header}>
+          <View style={styles.name_profile}>
+            <ProfilePlaceholder />
+            <Text style={styles.username}>daviddd</Text>
+          </View>
+          <Text style={styles.post_date}>September 20</Text>
+        </View>
+        <Text style={styles.c_text}>
+          This organization is doing amazing work tackling the complex root
+          causes of the issue.
+        </Text>
+
+        <View style={styles.person_header}>
+          <View style={styles.name_profile}>
+            <ProfilePlaceholder />
+            <Text style={styles.username}>vppraggie</Text>
+          </View>
+          <Text style={styles.post_date}>September 21</Text>
+        </View>
+        <Text style={styles.c_text}>Thanks for sharing!</Text>
+      </View>
     </View>
   );
 }
diff --git a/src/screens/styles.ts b/src/screens/styles.ts
@@ -5,6 +5,68 @@ export const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
+    backgroundColor: 'grey',
+    gap: 1,
+  },
+  post: {
+    paddingHorizontal: 15,
+    paddingTop: 8,
     backgroundColor: 'white',
   },
+  person_header: {
+    paddingTop: 15,
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  name_profile: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  username: {
+    fontWeight: 'bold',
+    fontSize: 13,
+  },
+  post_date: {
+    color: 'grey',
+    paddingRight: 2,
+    fontSize: 11,
+  },
+  da_text: {
+    paddingVertical: 15,
+    fontSize: 13,
+  },
+  da_link: {
+    color: 'blue',
+    textDecorationLine: 'underline',
+  },
+  da_image: {
+    width: '100%',
+    height: undefined,
+    aspectRatio: 1.5,
+    borderRadius: 10,
+  },
+  interactions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 15,
+  },
+  likes: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  comments: {
+    paddingHorizontal: 15,
+    backgroundColor: 'white',
+    width: '100%',
+    height: '100%',
+  },
+  c_text: {
+    paddingLeft: 34,
+    paddingTop: 8,
+  },
 });