{"size": 839, "ext": "js", "max_stars_repo_path": "src/renderer/appstore/components/AppCard/AppCard.js", "max_stars_repo_name": "Splyse/nos-client", "max_stars_repo_stars_event_min_datetime": "2018-04-14T13:50:54.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-26T02:12:32.000Z", "max_issues_repo_path": "src/renderer/appstore/components/AppCard/AppCard.js", "max_issues_repo_name": "Splyse/nos-client", "max_issues_repo_issues_event_min_datetime": "2018-04-15T10:55:57.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-25T18:53:38.000Z", "max_forks_repo_path": "src/renderer/appstore/components/AppCard/AppCard.js", "max_forks_repo_name": "Splyse/nos-client", "max_forks_repo_forks_event_min_datetime": "2018-04-14T22:00:35.000Z", "max_forks_repo_forks_event_max_datetime": "2021-04-15T18:16:01.000Z"}
{"max_stars_count": 254, "max_issues_count": 1192, "max_forks_count": 88, "avg_line_length": 23.3055555556, "max_line_length": 86, "alphanum_fraction": 0.6233611442}
import React from 'react';
import { func, bool } from 'prop-types';
import { noop } from 'lodash';

import styles from './AppCard.scss';
import appShape from '../../shape/appShape';

const AppCard = ({ app, openApp, internal }) => {
  const { title, blurb, url, img_url: imgUrl } = app;
  const clickHandler = internal ? noop : openApp(url);

  return (
    <div className={styles.appcard} role="button" tabIndex={0} onClick={clickHandler}>
      <div className={styles.imgContainer}>
        <img alt={`${title} logo`} src={imgUrl} />
      </div>
      <div className={styles.appInfo}>
        <h2>{title}</h2>
        <p>{blurb}</p>
      </div>
    </div>
  );
};

AppCard.propTypes = {
  app: appShape.isRequired,
  openApp: func.isRequired,
  internal: bool
};

AppCard.defaultProps = {
  internal: false
};

export default AppCard;
