{"size": 2125, "ext": "js", "max_stars_repo_path": "src/components/social.js", "max_stars_repo_name": "agathaco/portfolio", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/social.js", "max_issues_repo_name": "agathaco/portfolio", "max_issues_repo_issues_event_min_datetime": "2020-09-23T14:22:20.000Z", "max_issues_repo_issues_event_max_datetime": "2020-09-23T14:22:20.000Z", "max_forks_repo_path": "src/components/social.js", "max_forks_repo_name": "agathaco/portfolio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 36.6379310345, "max_line_length": 176, "alphanum_fraction": 0.6649411765}
import React, { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithub, faCodepen, faTwitter, faDev } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { FormattedMessage, useIntl } from "gatsby-plugin-intl"


const Social = () => {
  const intl = useIntl()
  const [copiedToClipBoard, setCopiedStatus] = useState(false);

  const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = str;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    setCopiedStatus(true);
    setTimeout(() => { setCopiedStatus(false); }, 2000)
  };
 
  return (
    <div className="social-icons">
    <div className="social-icon">
      <span className="tooltip social-tooltip email-tooltip">{copiedToClipBoard ? <FormattedMessage id="email.tooltip.copied"/> : <FormattedMessage id="email.tooltip"/>}</span>
      <FontAwesomeIcon icon={faEnvelope} className={copiedToClipBoard ? 'copied' : ''} size="2x" title="Email" onClick={() => copyToClipboard('agathecocco@gmail.com')}/>
    </div>
    <div className="social-icon">
    <a href='https://codepen.io/agathaco'>
      <span className="tooltip social-tooltip">Codepen</span>
      <FontAwesomeIcon icon={faCodepen} size="2x" title="Codepen"/>
    </a>
    </div>
    <div className="social-icon">
    <a href='https://github.com/agathaco'>
      <span className="tooltip social-tooltip">Github</span>
      <FontAwesomeIcon icon={faGithub} size="2x" title="Github"/>
    </a>
    </div>
    <div className="social-icon">
    <a href='https://dev.to/agathacco'>
      <span className="tooltip social-tooltip">Dev.to</span>
      <FontAwesomeIcon icon={faDev} size="2x" title="Dev.to"/>
    </a>
    </div>
    <div className="social-icon">
    <a href='https://twitter.com/agathacco'>
    <span className="tooltip social-tooltip">Twitter</span>
    <FontAwesomeIcon icon={faTwitter} size="2x" title="Twitter"/>
    </a>
    </div>
  </div>
  )
}

export default Social;
