Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed linking and formatting issues #1

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 73 additions & 32 deletions src/screens/PostScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Text, View } from 'react-native';
import React from 'react';
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';
Expand All @@ -7,37 +8,77 @@ 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>
{/* Profile Header */}
<View style={styles.profileHeader}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<ProfilePlaceholder style={styles.profileIcon} />
<Text style={styles.profileName}>rbeggs</Text>
</View>
<Text style={styles.postDate}>September 19</Text>
</View>

{/* Post Content with inline link */}
<View style={styles.postTextContainer}>
<Text style={styles.postText}>
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.
<Text style={styles.inlineLink}> read more online: </Text>
<Text style={styles.linkText}>https://www.codetenderloin.org/</Text>
</Text>
</View>

{/* Post Image */}
<Image
style={styles.postImage}
source={{
uri: 'https://cdn.britannica.com/51/178051-050-3B786A55/San-Francisco.jpg',
}}
/>

{/* Like and Share Section */}
<View style={styles.interactionRow}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<HeartIcon style={styles.icon} />
<Text style={styles.likesText}>256 Likes</Text>
</View>
<ShareIcon style={styles.icon} />
</View>

{/* Comments */}
<View style={styles.commentSection}>
Comment on lines +52 to +53
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One way to add a content divider would be to apply a border style to the top of the commentSection div.

<View style={styles.comment}>
<ProfilePlaceholder style={styles.commentIcon} />
<View>
<View style={styles.commentHeader}>
<Text style={styles.commentName}>philip_ye</Text>
<Text style={styles.commentDate}>September 20</Text>
</View>
<View style={styles.commentTextContainer}>
<Text style={styles.commentText}>
This organization is doing amazing work tackling the complex
root causes of the issue.
</Text>
</View>
</View>
</View>
<View style={styles.comment}>
<ProfilePlaceholder style={styles.commentIcon} />
<View>
<View style={styles.commentHeader}>
<Text style={styles.commentName}>vppraggie</Text>
<Text style={styles.commentDate}>September 21</Text>
</View>
<View style={styles.commentTextContainer}>
<Text style={styles.commentText}>Thanks for sharing!</Text>
</View>
</View>
</View>
</View>
</View>
);
}
94 changes: 93 additions & 1 deletion src/screens/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,99 @@ export const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
backgroundColor: 'white',
padding: 10,
},
profileHeader: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8,
justifyContent: 'space-between',
},
profileIcon: {
width: 40,
height: 40,
marginRight: 10,
},
profileName: {
fontWeight: 'bold',
fontSize: 16,
},
postDate: {
color: 'gray',
},
postTextContainer: {
marginBottom: 10,
},
postText: {
fontSize: 14,
lineHeight: 20,
},
inlineLink: {
fontSize: 14,
color: 'black',
},
linkText: {
color: '#1E90FF',
textDecorationLine: 'underline',
},
postImage: {
width: '100%',
height: 200,
borderRadius: 10,
marginVertical: 10,
},
interactionRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginVertical: 10,
width: '100%',
},
icon: {
marginRight: 8,
},
likesText: {
marginLeft: 5,
},
commentSection: {
borderTopWidth: 1,
borderTopColor: '#ccc',
paddingTop: 10,
marginTop: 20,
paddingRight: 10,
},
comment: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
rowGap: 10,
paddingRight: 10,
},
commentIcon: {
width: 30,
height: 30,
marginRight: 10,
},
commentHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
columnGap: 10,
},
commentName: {
fontWeight: 'bold',
},
commentDate: {
color: 'gray',
paddingRight: 15,
},
commentTextContainer: {
marginTop: 4,
},
commentText: {
fontSize: 14,
lineHeight: 18,
},
});