1 files changed, 118 insertions, 0 deletions
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
new file mode 100644
index 00000000..3cea2567
--- /dev/null
+++ b/src/components/common/SocialLinkModal.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import {Modal, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {TextInput} from 'react-native-gesture-handler';
+import {SCREEN_WIDTH} from '../../utils';
+
+interface SocialLinkModalProps {
+  modalVisible: boolean;
+  setModalVisible: (_: boolean) => void;
+  completionCallback: (username: string) => void;
+}
+
+const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
+  modalVisible,
+  setModalVisible,
+  completionCallback,
+}) => {
+  const [username, setUsername] = React.useState('');
+  return (
+    <>
+      <View style={styles.centeredView}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {}}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <TextInput
+                autoCapitalize={'none'}
+                autoCorrect={false}
+                textAlign={'center'}
+                placeholder={'Your username'}
+                style={styles.textInput}
+                onChangeText={setUsername}
+                value={username}
+              />
+              {/* link button */}
+              <TouchableHighlight
+                style={styles.openButton}
+                onPress={() => {
+                  setModalVisible(!modalVisible);
+                  setUsername('');
+                  completionCallback(username);
+                }}>
+                <Text style={styles.textStyle}>Link</Text>
+              </TouchableHighlight>
+              {/* cancel button */}
+              <Text
+                onPress={() => {
+                  setUsername('');
+                  setModalVisible(!modalVisible);
+                }}
+                style={styles.cancelStyle}>
+                Cancel
+              </Text>
+            </View>
+          </View>
+        </Modal>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalView: {
+    width: (SCREEN_WIDTH * 2) / 3,
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  openButton: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  cancelStyle: {
+    position: 'relative',
+    height: 17,
+    top: 17,
+    fontStyle: 'normal',
+    fontWeight: '500',
+    fontSize: 14,
+    /* identical to box height */
+    textAlign: 'center',
+    color: '#698DD3',
+  },
+  textInput: {
+    height: 20,
+    width: '75%',
+    borderBottomWidth: 0.4,
+    borderBottomColor: '#C4C4C4',
+    marginBottom: 20,
+  },
+});
+
+export default SocialLinkModal;