{"size": 1578, "ext": "js", "max_stars_repo_path": "src/modules/blog/components/BlogPostList/BlogPostListItem.js", "max_stars_repo_name": "sharvit/sharvit.github.io", "max_stars_repo_stars_event_min_datetime": "2019-08-29T19:42:13.000Z", "max_stars_repo_stars_event_max_datetime": "2019-08-29T19:42:13.000Z", "max_issues_repo_path": "src/modules/blog/components/BlogPostList/BlogPostListItem.js", "max_issues_repo_name": "sharvit/sharvit.github.io", "max_issues_repo_issues_event_min_datetime": "2019-08-12T15:08:26.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-20T01:50:03.000Z", "max_forks_repo_path": "src/modules/blog/components/BlogPostList/BlogPostListItem.js", "max_forks_repo_name": "sharvit/sharvit.github.io", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 187, "max_forks_count": null, "avg_line_length": 26.3, "max_line_length": 74, "alphanum_fraction": 0.5804816223}
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Link } from 'gatsby';
import { GatsbyImage } from 'gatsby-plugin-image';

import * as styles from './BlogPostListItem.module.scss';

const BlogPostListItem = ({ title, coverImage, path, date, excerpt }) => (
  <article className={styles.article}>
    <div className="row">
      <div className="col-md-10 col-md-offset-1">
        <div className="text-center">
          <Link to={path}>
            {coverImage && <GatsbyImage image={coverImage} alt={title} />}
            <h2 className={styles.title}>{title}</h2>
          </Link>
          <div className="title-uppercase">
            <time dateTime={date.toJSON()}>{date.toDateString()}</time>
          </div>
        </div>
      </div>
    </div>
    <div className="row">
      <div className="col-md-8 col-md-offset-2">
        <div className={styles.articleContent}>
          <p>{excerpt}</p>
          <Link
            to={path}
            className={classNames(
              'btn btn-simple btn-primary',
              styles.readMoreButton
            )}
          >
            READ MORE
          </Link>
        </div>
      </div>
    </div>
  </article>
);

BlogPostListItem.propTypes = {
  title: PropTypes.string,
  coverImage: PropTypes.object,
  path: PropTypes.string,
  date: PropTypes.instanceOf(Date),
  excerpt: PropTypes.string,
};

BlogPostListItem.defaultProps = {
  title: '',
  coverImage: null,
  path: '',
  date: new Date(),
  excerpt: '',
};

export default BlogPostListItem;
