3 files changed, 88 insertions, 14 deletions

diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 95aef8b9..d4b9a5dd 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import {StyleSheet, ViewProps} from 'react-native';
+import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native';
 import {Image, Text, View} from 'react-native-animatable';
 import {getUniversityClass, normalize} from '../../utils';
 
 export interface UniversityIconProps extends ViewProps {
   university: string;
-  university_class: number;
+  university_class?: number;
+  imageStyle?: StyleProp<ImageStyle>;
 }
 
 /**
@@ -13,8 +14,10 @@ export interface UniversityIconProps extends ViewProps {
  */
 const UniversityIcon: React.FC<UniversityIconProps> = ({
   style,
+  imageStyle,
   university,
   university_class,
+  imageStyle,
 }) => {
   var universityIcon;
   switch (university) {
@@ -28,10 +31,12 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
 
   return (
     <View style={[styles.container, style]}>
-      <Image source={universityIcon} style={styles.icon} />
-      <Text style={styles.univClass}>
-        {getUniversityClass(university_class)}
-      </Text>
+      <Image source={universityIcon} style={[styles.icon, imageStyle]} />
+      {university_class && (
+        <Text style={styles.univClass}>
+          {getUniversityClass(university_class)}
+        </Text>
+      )}
     </View>
   );
 };
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
new file mode 100644
index 00000000..1af815db
--- /dev/null
+++ b/src/components/search/ExploreSection.tsx
@@ -0,0 +1,60 @@
+import React, {Fragment} from 'react';
+import {FlatList, StyleSheet, Text, View} from 'react-native';
+import {ProfilePreviewType} from '../../types';
+import {normalize} from '../../utils';
+import ExploreSectionUser from './ExploreSectionUser';
+
+/**
+ * Search Screen for user recommendations and a search
+ * tool to allow user to find other users
+ */
+
+interface ExploreSectionProps {
+  title: string;
+  users: ProfilePreviewType[];
+}
+const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
+  return users && users.length !== 0 ? (
+    <View style={styles.container}>
+      <Text style={styles.header}>{title}</Text>
+      <FlatList
+        data={users}
+        ListHeaderComponent={<View style={styles.padding} />}
+        renderItem={({item: user}: {item: ProfilePreviewType}) => (
+          <ExploreSectionUser
+            key={user.id}
+            user={user}
+            externalStyles={StyleSheet.create({
+              container: styles.user,
+            })}
+          />
+        )}
+        showsHorizontalScrollIndicator={false}
+        horizontal
+      />
+    </View>
+  ) : (
+    <Fragment />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: '5%',
+  },
+  header: {
+    fontWeight: '600',
+    fontSize: normalize(18),
+    color: '#fff',
+    marginLeft: '5%',
+    marginBottom: '5%',
+  },
+  user: {
+    marginHorizontal: 5,
+  },
+  padding: {
+    width: 10,
+  },
+});
+
+export default ExploreSection;
diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx
index b0cfe5c6..6be8282b 100644
--- a/src/components/search/ExploreSectionUser.tsx
+++ b/src/components/search/ExploreSectionUser.tsx
@@ -1,7 +1,9 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
+import {TextStyle, ViewStyle} from 'react-native';
 import {
   Image,
+  StyleProp,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -21,10 +23,11 @@ import {fetchUserX, normalize, userXInStore} from '../../utils';
 
 interface ExploreSectionUserProps extends ViewProps {
   user: ProfilePreviewType;
+  externalStyles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
 }
 const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
   user,
-  style,
+  externalStyles,
 }) => {
   const {id, username, first_name, last_name} = user;
   const [avatar, setAvatar] = useState<string | null>(null);
@@ -59,7 +62,9 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
     });
   };
   return (
-    <TouchableOpacity style={[styles.container, style]} onPress={handlePress}>
+    <TouchableOpacity
+      style={[styles.container, externalStyles?.container]}
+      onPress={handlePress}>
       <LinearGradient
         colors={['#9F00FF', '#27EAE9']}
         useAngle
@@ -75,10 +80,12 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
           style={styles.profile}
         />
       </LinearGradient>
-      <Text style={styles.name} numberOfLines={2}>
+      <Text style={[styles.name, externalStyles?.name]} numberOfLines={2}>
         {first_name} {last_name}
       </Text>
-      <Text style={styles.username} numberOfLines={1}>{`@${username}`}</Text>
+      <Text
+        style={[styles.username, externalStyles?.username]}
+        numberOfLines={1}>{`@${username}`}</Text>
     </TouchableOpacity>
   );
 };
@@ -89,7 +96,7 @@ const styles = StyleSheet.create({
     width: 100,
   },
   gradient: {
-    height: 60,
+    height: 62,
     aspectRatio: 1,
     borderRadius: 40,
     justifyContent: 'center',
@@ -104,13 +111,15 @@ const styles = StyleSheet.create({
   name: {
     fontWeight: '600',
     flexWrap: 'wrap',
-    fontSize: normalize(16),
+    fontSize: normalize(14),
+    lineHeight: normalize(15),
     color: '#fff',
     textAlign: 'center',
   },
   username: {
-    fontWeight: '400',
-    fontSize: normalize(14),
+    fontWeight: '500',
+    fontSize: normalize(11),
+    lineHeight: normalize(15),
     color: '#fff',
   },
 });