[TMA-160] Search Page Suggestions ("Explore") UI (#30)

* Fix require cycle in Checkpoint.tsx

* Create file structure for search

* Add react-native-vector-icons to project

* Create search page UI

* Create search page UI

* [TMA-65] Onboarding Link Social Media UI (#29)

* Basic setup for SocialMediaLinker component

* Added social media icons

* Displayed 3 main social components

* Layout components in a row

* Added base Show More/Less button

* Display all 9 socials with Show More button

* Added different font colors for each linker

* Realized that the check doesn't replace the text

* Added type-checking to some constants

* Updated state name

* Fixed Checkpoint.tsx merge issue

* Removed unnecessary path element

* Fixed type issues on Verification.tsx

* Create file structure for search

* Add react-native-vector-icons to project

* Create search page UI

* Replace avatars with image placeholder

* Add search bar placeholder

Co-authored-by: Justin Shillingford <jgs272@cornell.edu>

1 files changed, 61 insertions, 0 deletions

diff --git a/src/components/search/SuggestedUser.tsx b/src/components/search/SuggestedUser.tsx
new file mode 100644
index 00000000..467e5e6c
--- /dev/null
+++ b/src/components/search/SuggestedUser.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {View, StyleSheet, Text, ViewProps, Image} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+/**
+ * Search Screen for user recommendations and a search
+ * tool to allow user to find other users
+ */
+
+interface SuggestedUserProps extends ViewProps {
+  name: string;
+}
+const SuggestedUser: React.FC<SuggestedUserProps> = ({name, style}) => {
+  return (
+    <View style={[styles.container, style]}>
+      <LinearGradient
+        colors={['#9F00FF', '#27EAE9']}
+        useAngle
+        angle={90}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={styles.gradient}>
+        <Image
+          source={require('../../assets/images/avatar-placeholder.png')}
+          style={styles.profile}
+        />
+      </LinearGradient>
+      <Text style={styles.name}>{name}</Text>
+      <Text style={styles.username}>{`@${name.split(' ').join('')}`}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  gradient: {
+    height: 80,
+    width: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  profile: {
+    height: 76,
+    width: 76,
+    borderRadius: 38,
+  },
+  name: {
+    fontWeight: '600',
+    fontSize: 16,
+    color: '#fff',
+  },
+  username: {
+    fontWeight: '600',
+    fontSize: 14,
+    color: '#fff',
+  },
+});
+export default SuggestedUser;