{"size": 842, "ext": "js", "max_stars_repo_path": "src/components/UI/Error/Error.js", "max_stars_repo_name": "Nicekor/pt-quizz", "max_stars_repo_stars_event_min_datetime": "2020-05-13T09:10:21.000Z", "max_stars_repo_stars_event_max_datetime": "2020-10-08T22:36:06.000Z", "max_issues_repo_path": "src/components/UI/Error/Error.js", "max_issues_repo_name": "Nicekor/pt-quizz", "max_issues_repo_issues_event_min_datetime": "2020-06-27T15:06:12.000Z", "max_issues_repo_issues_event_max_datetime": "2020-06-27T15:06:12.000Z", "max_forks_repo_path": "src/components/UI/Error/Error.js", "max_forks_repo_name": "Nicekor/pt-quizz", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 24.0571428571, "max_line_length": 81, "alphanum_fraction": 0.5819477435}
import React, { useEffect } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';

import classes from './error.module.css';

const Error = ({ err }) => {
  useEffect(() => {
    console.error(err);
  }, [err]);

  return (
    <div className={classes.errorContainer}>
      <FontAwesomeIcon
        icon={faTimesCircle}
        color="salmon"
        size="4x"
        className={classes.icon}
      />
      <div className={classes.messageContainer}>
        <p>
          Something went wrong! Please try again later.
          <span role="img" aria-label="Sad Face Emoji" className={classes.emoji}>
            😞
          </span>
        </p>
        <p>Error message: {err?.message}</p>
      </div>
    </div>
  );
};

export default Error;
