Created two new profile preview types

3 files changed, 62 insertions, 0 deletions

diff --git a/src/components/index.ts b/src/components/index.ts
index 46a7773f..0a7c189b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,3 +5,5 @@ export * from './search';
 export * from './taggs';
 export * from './comments';
 export * from './moments';
+export * from './suggestedPeople';
+
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index fad3ec09..cdbf2dab 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -188,6 +188,17 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       usernameStyle = styles.friendUsername;
       nameStyle = styles.friendName;
       break;
+    case 'Suggested People Drawer':
+      containerStyle = styles.suggestedPeopleContainer;
+      avatarStyle = styles.suggestedPeopleAvatar;
+      nameContainerStyle = styles.suggestedPeopleNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.suggestedPeopleUsername;
+      nameStyle = styles.suggestedPeopleName;
+      break;
+    case 'Suggested People Screen':
+      avatarStyle = styles.suggestedPeopleScreenAvatar;
+      break;
     default:
       containerStyle = styles.searchResultContainer;
       avatarStyle = styles.searchResultAvatar;
@@ -229,6 +240,16 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
           </>
         )}
+        {previewType === 'Suggested People Drawer' && (
+          <>
+            <Text style={styles.suggestedPeopleName} numberOfLines={2}>
+              {first_name} {last_name}
+            </Text>
+            <Text
+              style={styles.suggestedPeopleUsername}
+              numberOfLines={1}>{`@${username}`}</Text>
+          </>
+        )}
       </View>
     </TouchableOpacity>
   );
@@ -340,6 +361,44 @@ const styles = StyleSheet.create({
     color: '#6C6C6C',
     letterSpacing: normalize(0.1),
   },
+  suggestedPeopleContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: SCREEN_WIDTH * 0.03,
+    backgroundColor: 'transparent',
+  },
+  suggestedPeopleAvatar: {
+    alignSelf: 'center',
+    height: normalize(60),
+    width: normalize(60),
+    borderRadius: 60,
+  },
+  suggestedPeopleUsername: {
+    fontSize: normalize(10),
+    lineHeight: normalize(15),
+    fontWeight: '500',
+    color: '#828282',
+    textAlign: 'center',
+  },
+  suggestedPeopleNameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+    marginTop: 10,
+  },
+  suggestedPeopleName: {
+    fontSize: normalize(12),
+    lineHeight: normalize(15),
+    fontWeight: '700',
+    color: '#3C3C3C',
+    textAlign: 'center',
+  },
+  suggestedPeopleScreenAvatar: {
+    height: normalize(33.5),
+    width: normalize(33.5),
+    marginRight: 15,
+    borderRadius: 50,
+  },
 });
 
 export default ProfilePreview;
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
new file mode 100644
index 00000000..219ee2fe
--- /dev/null
+++ b/src/components/suggestedPeople/index.ts
@@ -0,0 +1 @@
+export {default as MutualFriends} from './MutualFriends';