Source: components/yellowpages/ProfileBox.js

import React, { Component } from 'react'
import getTranslation from '../../i18n/'
import { Link } from 'react-router-dom'

/**
 * The actual display box for the profiles in the yellow pages
 */
class ProfileBox extends Component {
    
    /**
     * Toggle the contact form
     * @param  {} name
     * @param  {} email
     */
    toggleOverlay(name, email) {
        this.props.toggleOverlay(name, email)
    }

    render() {
        let profile = this.props.profile

        return(
            <div key={profile.id} className="default-element default-element-dark profile-teaser">
              <Link to={"/experts/yellow-pages/"+profile.id}><h4><i className="fa fa-user-o" aria-hidden="true"></i> {profile.name}</h4></Link>
                <div className="container-flex">
                  <div className="third">
                      <p>
                      <label>{getTranslation("userprofile.form.pilot_area.label")}:</label>
                      <span>{getTranslation(profile.area)}</span>

                      <label>{getTranslation("userprofile.form.address.label")}</label>

                      {profile.street}<br />
                      {profile.zip} {profile.city}<br />
                      {getTranslation(profile.countryname)}<br />
                      </p><p>
                      {profile.phone !== '' &&
                      <span>
                      <label>{getTranslation("userprofile.form.phone.label")}:</label>
                      <span>{profile.phone}</span>
                      </span>
                      }
                      <label>{getTranslation("forms.general.email.label")}:</label>
                      <span>{profile.email}</span>

                      {profile.website !== '' &&
                      <span>
                      <label>{getTranslation("userprofile.form.website.label")}:</label>
                      <span><a href={profile.website}>{profile.website}</a></span>
                      </span>
                      }

                      {profile.contactform &&
                      <span>
                      <button className="btn btn-blue btn-icon btn-email" onClick={() => this.toggleOverlay(profile.name, profile.email)}>{getTranslation("contact.button")}</button>
                      </span>
                      }
                      </p>

                  </div>
                  <div className="two-third">
                  <ul className="list-of-occupations">
                      {profile.groups.map((group, index) =>
                          <li key={index}>{group}</li>
                      )}
                  </ul>
                      <p><label>{getTranslation("userprofile.short_profile")}:</label></p>
                    <p>

                      <span>{profile.desc}</span>

                    </p>
                    {profile.desc === '' &&
                    <p>{getTranslation("userprofile.short_profile_none_given")}</p>
                      }
                  </div>
                </div>

            </div>
        )
    }
}

export default ProfileBox