1 files changed, 110 insertions, 0 deletions
diff --git a/src/components/onboarding/SocialMediaLinker.tsx b/src/components/onboarding/SocialMediaLinker.tsx
new file mode 100644
index 00000000..f1da8186
--- /dev/null
+++ b/src/components/onboarding/SocialMediaLinker.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import {
+  StyleSheet,
+  TouchableOpacityProps,
+  Text,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import {LinkerType} from 'src/types';
+import {SOCIAL_FONT_COLORS} from '../../constants/constants';
+
+interface SocialMediaLinkerProps extends TouchableOpacityProps {
+  social: LinkerType;
+}
+
+const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
+  social: {label},
+}) => {
+  const [state, setState] = React.useState({
+    authenticated: false,
+  });
+
+  const handlePress = () => {
+    setState({
+      ...state,
+      authenticated: !state.authenticated,
+    });
+  };
+
+  switch (label) {
+    case 'Instagram':
+      var icon = require('../../assets/images/instagram-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.INSTAGRAM;
+      break;
+    case 'Facebook':
+      var icon = require('../../assets/images/facebook-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.FACEBOOK;
+      break;
+    case 'Twitter':
+      var icon = require('../../assets/images/twitter-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.TWITTER;
+      break;
+    case 'Twitch':
+      var icon = require('../../assets/images/twitch-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.TWITCH;
+      break;
+    case 'Pinterest':
+      var icon = require('../../assets/images/pinterest-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.PINTEREST;
+      break;
+    case 'Whatsapp':
+      var icon = require('../../assets/images/whatsapp-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.WHATSAPP;
+      break;
+    case 'Linkedin':
+      var icon = require('../../assets/images/linkedin-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.LINKEDIN;
+      break;
+    case 'Snapchat':
+      var icon = require('../../assets/images/snapchat-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.SNAPCHAT;
+      break;
+    case 'Youtube':
+      var icon = require('../../assets/images/youtube-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.YOUTUBE;
+      break;
+    default:
+      var icon = require('../../assets/images/logo.png');
+      var font_color = '#fff';
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      onPress={handlePress}
+      style={styles.container}>
+      <Image source={icon} style={styles.icon} />
+      <Text style={[styles.label, {color: font_color}]}>{label}</Text>
+      {state.authenticated && (
+        <Image
+          source={require('../../assets/images/link-tick.png')}
+          style={styles.tick}
+        />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '28%',
+    height: '100%',
+    backgroundColor: '#4c409a',
+    borderRadius: 8,
+    marginHorizontal: '2%',
+    marginVertical: '2%',
+    alignItems: 'center',
+  },
+  icon: {
+    top: '15%',
+  },
+  label: {
+    fontWeight: '500',
+    top: '25%',
+  },
+  tick: {
+    top: '30%',
+  },
+});
+export default SocialMediaLinker;