Lighthouse/src/Pages/User/UserPic.jsx

import React from 'react'
import cl from 'classnames'

const Card = ({ className, children, interactive }) => {
    let classes = cl(["pt-card", className, {'pt-interactive': interactive}]);
    return <div className={classes}>{children}</div>
}

const Placeholder = ({ iconName, title, description }) => 
    <div className="pt-non-ideal-state">
        <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
            <span className={`pt-icon pt-icon-${iconName}`}></span>
        </div>
        <h4 className="pt-non-ideal-state-title">{title}</h4>
        <div className="pt-non-ideal-state-description">
            {description}
        </div>
    </div>

const UserPic = () => 
    <Card className="profile-pic" interactive>
        <Placeholder iconName="mugshot" title="No picture" description="Click to change"/>
    </Card>

export default UserPic;