{"size": 813, "ext": "js", "max_stars_repo_path": "src/components/characters/CharacterItem.js", "max_stars_repo_name": "adewale2018/breaking_bad", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/characters/CharacterItem.js", "max_issues_repo_name": "adewale2018/breaking_bad", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/characters/CharacterItem.js", "max_forks_repo_name": "adewale2018/breaking_bad", "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": 23.9117647059, "max_line_length": 68, "alphanum_fraction": 0.4440344403}
import React from "react";

const CharacterItem = ({ item }) => {
  const { img, name, portrayed, nickname, birthday, status } = item;
  return (
    <div className='card'>
      <div className='card-inner'>
        <div className='card-front'>
          <img src={img} alt='' />
        </div>
        <div className='card-back'>
          <h1>{name}</h1>
          <ul>
            <li>
              <strong>Actor Name:</strong> {portrayed}
            </li>
            <li>
              <strong>Nickname:</strong> {nickname}
            </li>
            <li>
              <strong>Birthday:</strong> {birthday}
            </li>
            <li>
              <strong>Status:</strong> {status}
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default CharacterItem;
