{"size": 808, "ext": "js", "max_stars_repo_path": "exercises/3/src/common/components/Balloon.js", "max_stars_repo_name": "Randynamic/redux-exercises", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "exercises/3/src/common/components/Balloon.js", "max_issues_repo_name": "Randynamic/redux-exercises", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "exercises/3/src/common/components/Balloon.js", "max_forks_repo_name": "Randynamic/redux-exercises", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 31.0769230769, "max_line_length": 117, "alphanum_fraction": 0.5272277228}
import React from 'react';

class Balloon extends React.PureComponent {
  render() {
    const {position} = this.props;
    const {top, left} = position;
    const topPosition = `-${top}`.replace('%', '');
    const leftPosition = `${left}`.replace('%', '');
    const balloonClassName = `cls-${top}`.replace('%', '');
    return (
      <div style={{position: 'absolute', height: '100%', width: '100%', top: '0', left: '0', pointerEvents: 'none'}}>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <g>
            <g>
              <ellipse className={balloonClassName} cx={topPosition} cy={leftPosition} rx="0.84" ry="0.55"
                       transform="rotate(-82.53)"/>
            </g>
          </g>
        </svg>
      </div>
    );
  }
}

export default Balloon;
