blog post archive with material ui

blog-post-arhive.tsx

import { Grid } from '@material-ui/core';
import { BlogPost, PostSummary } from '@nx-gatsby-blogs/ui';
import { graphql } from 'gatsby';
import React from 'react';

import {
  BlogPostArchivePropsData,
  transformBlogPostArchivePropsDataToBlogPosts,
} from './models/blog-post-archive-props-data';

export interface BlogPostArchiveProps {
  data: BlogPostArchivePropsData;
}

export function BlogPostArchive({ data }: BlogPostArchiveProps) {
  const posts: BlogPost[] = transformBlogPostArchivePropsDataToBlogPosts(data);

  return (
    <Grid container spacing={5}>
      {posts.map((post) => {
        return (
          <Grid item xs={12} sm={6} md={4} key={post.id}>
            <PostSummary post={post}></PostSummary>
          </Grid>
        );
      })}
    </Grid>
  );
}

export default BlogPostArchive;

export const pageQuery = graphql`
  query WordPressPostArchive {
    allWpPost(sort: { fields: [date], order: DESC }) {
      nodes {
        id
        excerpt
        date(formatString: "MMMM DD, YYYY")
        title
        uri
        featuredImage {
          node {
            altText
            localFile {
              url
            }
          }
        }
      }
    }
  }
`;