Lighthouse/src/Pages/User/UserInfo.jsx

import React from 'react'
import FontAwesome from 'react-fontawesome'
import { EditableText } from "@blueprintjs/core"

const SocialLink = ({ iconName, ...otherProps }) => <h4><FontAwesome name={iconName} /><EditableText {...otherProps}/></h4>

const UserInfo = () => 
    <div className="profile-info">
        <h3><EditableText placeholder="Username"/></h3>
        <h3><EditableText placeholder="Email"/></h3>
        <div className="social-columns">
            <SocialLink iconName="twitter" placeholder="Twitter" />
            <SocialLink iconName="facebook" placeholder="Facebook"/>
            <SocialLink iconName="linkedin" placeholder="LinkedIn"/>
            <SocialLink iconName="stack-overflow" placeholder="StackOverflow"/>
            <SocialLink iconName="github" placeholder="Github"/>
            <SocialLink iconName="globe" placeholder="Website"/>
        </div>
    </div>
    

export default UserInfo