{"size": 1307, "ext": "js", "max_stars_repo_path": "src/components/blog/blog-body/blog-body.js", "max_stars_repo_name": "fedonman/fedonman-website-old", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/blog/blog-body/blog-body.js", "max_issues_repo_name": "fedonman/fedonman-website-old", "max_issues_repo_issues_event_min_datetime": "2021-09-21T04:40:56.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T01:54:36.000Z", "max_forks_repo_path": "src/components/blog/blog-body/blog-body.js", "max_forks_repo_name": "fedonman/fedonman-website-old", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 27.2291666667, "max_line_length": 108, "alphanum_fraction": 0.4529456771}
import React from 'react';
import { Link } from 'gatsby';
import PropTypes from 'prop-types';

import moment from 'moment';

import { Body, PostList, PostListItem, PostTitle, PostMeta, Time, TagList, TagItem } from './blog-body.css';


const BlogBody = ({ posts }) => {
  return (
    <Body>
      <PostList>
        {posts.map(post => {
          const { title, date, tags } = post.node.frontmatter;
          const { slug, tagSlugs } = post.node.fields;
          return (
            <PostListItem key={slug}>
              <PostMeta>
                <Time dateTime={moment(date).format('YYYY-MM-DD')}>
                  {moment(date).format('MMMM YYYY')}
                </Time>
                <TagList>
                  {tagSlugs.map((tag, i) => {
                    return (
                      <TagItem key={tag}>
                        <Link to={tag}>
                          {tags[i]}
                        </Link>
                      </TagItem>
                    )
                  })}
                </TagList>
              </PostMeta>
            <PostTitle><Link to={slug}>{title}</Link></PostTitle>
          </PostListItem>
          )
        })}
      </PostList>
    </Body>
  );
};

BlogBody.propTypes = {
  posts: PropTypes.array.isRequired,
};

export default BlogBody;