[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>

6 files changed, 221 insertions, 0 deletions

diff --git a/src/components/index.ts b/src/components/index.ts
index 48b7df05..77ba0f67 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from './common';
 export * from './onboarding';
 export * from './profile';
+export * from './search';
diff --git a/src/components/search/SearchBackground.tsx b/src/components/search/SearchBackground.tsx
new file mode 100644
index 00000000..66e3dbdb
--- /dev/null
+++ b/src/components/search/SearchBackground.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {StyleSheet, ViewProps} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+interface SearchBackgroundProps extends ViewProps {}
+const SearchBackground: React.FC<SearchBackgroundProps> = ({
+  style,
+  children,
+}) => {
+  return (
+    <LinearGradient
+      useAngle={true}
+      angle={167}
+      colors={['#421566', '#385D5E']}
+      style={[styles.container, style]}>
+      {children}
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default SearchBackground;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
new file mode 100644
index 00000000..283b6d59
--- /dev/null
+++ b/src/components/search/SearchBar.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  Text,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import Animated from 'react-native-reanimated';
+
+interface SearchBarProps extends TextInputProps {
+  active: boolean;
+}
+const SearchBar: React.FC<SearchBarProps> = ({onFocus, onBlur, active}) => {
+  const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    // TODO: animate Icon & View.inputContainer.borderColor color to '#000'
+    // TODO: animate background color (& page color in results ScrollView) to '#ffff' (last f for opacity)
+    // TODO: animate TextInput width and mount "Cancel" button (& animate opacity)
+    // OR
+    // TODO: just animate "Cancel" button width and opacity (this might be  easier)
+    onFocus && onFocus(e);
+  };
+  const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    // TODO: animate Icon color & View.inputContainer borderColor back
+    // TODO: animate background color (and page color in ScrollView) back to '#fff3'
+    // TODO: unmount Cancel button (and animate width change)
+    onBlur && onBlur(e);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={styles.inputContainer}>
+        <Icon name="search" size={25} color="#fff" style={styles.searchIcon} />
+        <TextInput
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          style={styles.input}
+          placeholder={'Search...'}
+        />
+      </Animated.View>
+      {active && (
+        <TouchableOpacity style={styles.cancelButton}>
+          <Text style={styles.cancel}>Cancel</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 40,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    height: '100%',
+    paddingHorizontal: 8,
+    backgroundColor: '#fff3',
+    borderColor: '#fff',
+    borderWidth: 1.5,
+    borderRadius: 20,
+  },
+  searchIcon: {
+    marginRight: 8,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+  },
+  cancelButton: {
+    marginHorizontal: 5,
+  },
+  cancel: {
+    color: '#818181',
+    fontWeight: '600',
+  },
+});
+
+export default SearchBar;
diff --git a/src/components/search/SuggestedSection.tsx b/src/components/search/SuggestedSection.tsx
new file mode 100644
index 00000000..af0323a5
--- /dev/null
+++ b/src/components/search/SuggestedSection.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {View, Text, ScrollView, StyleSheet} from 'react-native';
+import SuggestedUser from './SuggestedUser';
+
+/**
+ * Search Screen for user recommendations and a search
+ * tool to allow user to find other users
+ */
+
+interface SuggestedSectionProps {
+  title: string;
+  users: Array<string>;
+}
+const SuggestedSection: React.FC<SuggestedSectionProps> = ({title, users}) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>{title}</Text>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        {users.map((name, key) => (
+          <SuggestedUser {...{name, key}} style={styles.user} />
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 30,
+  },
+  header: {
+    fontWeight: '600',
+    fontSize: 20,
+    color: '#fff',
+    marginBottom: 20,
+  },
+  user: {
+    marginHorizontal: 15,
+  },
+});
+
+export default SuggestedSection;
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;
diff --git a/src/components/search/index.ts b/src/components/search/index.ts
new file mode 100644
index 00000000..4e1d2b14
--- /dev/null
+++ b/src/components/search/index.ts
@@ -0,0 +1,3 @@
+export {default as SearchBar} from './SearchBar';
+export {default as SuggestedSection} from './SuggestedSection';
+export {default as SearchBackground} from './SearchBackground';