added social presence component

src/App.js

@@ -1,21 +1,27 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, {Component} from 'react';
 import './App.css';
+import Me from "./Me";
 
 class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          Journey of React begins....
-        </p>
-      </div>
-    );
-  }
+
+    toggle = false;
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="App">
+                <header className="App-header">
+                    <img src={this.props.data.image} className="App-logo" alt="logo"/>
+                    <h1 className="App-title">Welcome {this.props.data.firstName}
+                        {this.props.data.lastName}</h1>
+                </header>
+                <Me userDetails={this.props.data.details}/>
+            </div>
+        );
+    }
 }
 
-export default App;
+export default App;

src/Me.js

@@ -1,10 +1,13 @@
 import React from 'react';
+import SocialDetails from "./SocialDetails";
 
-function Me({ data, toggle }) {
+function Me({userDetails}) {
     return (
         <div>
-            <h1>{data.firstName}</h1>
-            { toggle &&  <small>{data.lastName}</small>}
+            <h1>Social Presence</h1>
+            <ul>
+                {userDetails.map(detail => <li key={detail.id}><SocialDetails socialDetails={detail}/></li>)}
+            </ul>
         </div>
     )
 }

src/SocialDetails.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function SocialDetails({socialDetails}) {
+    return (
+        <div>
+            <p><strong>{socialDetails.provider}</strong>
+                {socialDetails.username !== undefined && " - " + socialDetails.username}
+                {socialDetails.channel !== undefined && " - " + socialDetails.channel}
+                {socialDetails.link !== undefined && " - " + socialDetails.link}
+                {socialDetails.url !== undefined && " - " + socialDetails.url}
+                {socialDetails.type !== undefined && " - " + socialDetails.type}
+                {" - " + socialDetails.engagement.join(", ")}
+            </p>
+        </div>
+    )
+}
+
+export default SocialDetails

src/index.js

@@ -3,4 +3,45 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+window.data = {
+    firstName: 'Aravind',
+    lastName: 'M',
+    image: '',
+    details: [
+        {
+            id:1,
+            provider: 'facebook',
+            username: 'mak11195',
+            engagement: ['personal'],
+            link: ''
+        },
+        {
+            id:2,
+            provider: 'github',
+            username: 'makaravind',
+            engagement: ['professional'],
+            link: 'https://github.com/makaravind'
+        },
+        {
+            id:3,
+            provider: 'gmail',
+            username: 'aravindmetku@gmail.com',
+            engagement: ['professional', 'personal'],
+        },
+        {
+            id:4,
+            provider: 'youtube',
+            channel: 'amyourmove',
+            url: 'youtube.com/c/amyourmove',
+            engagement: ['professional'],
+        },
+        {
+            id:5,
+            provider: 'wordpress',
+            type: 'blog',
+            url: 'https://maravindblog.wordpress.com',
+            engagement: ['professional'],
+        }
+    ]
+};
+ReactDOM.render(<App data={window.data}/>, document.getElementById('root'));