Add tagged users preview component

1 files changed, 40 insertions, 4 deletions

diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 66d68d8f..af49c6a2 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -148,6 +148,14 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       usernameStyle = styles.discoverUsersUsername;
       nameStyle = styles.discoverUsersName;
       break;
+    case 'Tag Selection':
+      containerStyle = styles.tagSelectionContainer;
+      avatarStyle = styles.tagSelectionAvatar;
+      nameContainerStyle = styles.tagSelectionNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.tagSelectionUsername;
+      nameStyle = styles.tagSelectionName;
+      break;
     case 'Comment':
       containerStyle = styles.commentContainer;
       avatarStyle = styles.commentAvatar;
@@ -195,10 +203,9 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
           </>
         )}
-        {previewType === 'Comment' && (
-          <Text style={usernameStyle}>{usernameToDisplay}</Text>
-        )}
-        {previewType === 'Discover Users' && (
+        {(previewType === 'Discover Users' ||
+          previewType === 'Tag Selection' ||
+          previewType === 'Comment') && (
           <>
             <Text style={usernameStyle}>{usernameToDisplay}</Text>
           </>
@@ -368,6 +375,35 @@ const styles = StyleSheet.create({
     marginRight: 15,
     borderRadius: 50,
   },
+  tagSelectionContainer: {
+    width: 60,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    margin: '1%',
+  },
+  tagSelectionAvatar: {
+    width: 34,
+    height: 34,
+    borderRadius: 20,
+  },
+  tagSelectionNameContainer: {
+    width: '100%',
+    paddingVertical: '5%',
+  },
+  tagSelectionUsername: {
+    fontWeight: '500',
+    fontSize: normalize(9),
+    lineHeight: normalize(10),
+    letterSpacing: normalize(0.2),
+    color: 'white',
+    textAlign: 'center',
+  },
+  tagSelectionName: {
+    fontWeight: '500',
+    fontSize: 8,
+    color: 'white',
+  },
 });
 
 export default ProfilePreview;