diff options
-rw-r--r-- | src/components/profile/Followers.tsx | 2 | ||||
-rw-r--r-- | src/components/profile/ProfilePreview.tsx | 41 | ||||
-rw-r--r-- | src/types/types.ts | 8 |
3 files changed, 49 insertions, 2 deletions
diff --git a/src/components/profile/Followers.tsx b/src/components/profile/Followers.tsx index c665603d..44ae4399 100644 --- a/src/components/profile/Followers.tsx +++ b/src/components/profile/Followers.tsx @@ -35,7 +35,7 @@ const Followers: React.FC<FollowersListProps> = ({ style={styles.follower} key={profilePreview.id} {...{profilePreview}} - previewType={'Comment'} + previewType={'Follow'} screenType={screenType} /> ))} diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 5567fa5a..93d1f415 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -203,6 +203,14 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({ usernameStyle = styles.commentUsername; nameStyle = styles.commentName; break; + case 'Follow': + containerStyle = styles.followContainer; + avatarStyle = styles.followAvatar; + nameContainerStyle = styles.followNameContainer; + usernameToDisplay = '@' + username; + usernameStyle = styles.followUsername; + nameStyle = styles.followName; + break; default: containerStyle = styles.searchResultContainer; avatarStyle = styles.searchResultAvatar; @@ -240,6 +248,12 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({ <Text style={usernameStyle}>{usernameToDisplay}</Text> </> )} + {previewType === 'Follow' && ( + <> + <Text style={usernameStyle}>{usernameToDisplay}</Text> + <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text> + </> + )} </View> </TouchableOpacity> ); @@ -320,6 +334,33 @@ const styles = StyleSheet.create({ color: 'white', textAlign: 'center', }, + followContainer: { + flexDirection: 'row', + alignItems: 'center', + marginVertical: 10, + }, + followAvatar: { + height: 42, + width: 42, + marginRight: 15, + borderRadius: 20, + }, + followNameContainer: { + justifyContent: 'space-evenly', + alignSelf: 'stretch', + }, + followUsername: { + fontSize: 14, + fontWeight: '700', + color: '#3C3C3C', + letterSpacing: 0.6, + }, + followName: { + fontSize: 12, + fontWeight: '500', + color: '#6C6C6C', + letterSpacing: 0.5, + }, }); export default ProfilePreview; diff --git a/src/types/types.ts b/src/types/types.ts index 56ec0fd0..51837a91 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -86,7 +86,13 @@ export interface CommentType { commenter__username: string; } -export type PreviewType = 'Comment' | 'Search' | 'Recent' | 'Discover Users'; +export type PreviewType = + | 'Comment' + | 'Search' + | 'Recent' + | 'Discover Users' + | 'Follow'; + export enum ScreenType { Profile, |