text: import React, { Fragment } from 'react'
  
  import PostsListItem from './PostsListItem'
  import useSiteMetadata from '../hooks/use-site-config'
  import useSiteImages from '../hooks/use-site-images'
  
  const PostsList = ({ posts }) => {
    const { siteCover, defaultLang } = useSiteMetadata()
    const { fluid } = useSiteImages(siteCover)
  
    return (
      <Fragment>
        {posts.map(post => {
          const props = {
            title: post.node.frontmatter.title,
            excerpt: post.node.excerpt,
            slug: post.node.frontmatter.slug,
            timeToRead: post.node.timeToRead,
            language: post.node.frontmatter.language || defaultLang,
            tags: post.node.frontmatter.tags || [],
            heroImg: (post.node.frontmatter.cover && post.node.frontmatter.cover.publicURL) || fluid.src
          }
          return <PostsListItem key={props.slug} {...props} />
        })}
      </Fragment>
    )
  }
  export default PostsList
  