text: import React from 'react';
  import { useStaticQuery, graphql } from 'gatsby';
  import Link from 'gatsby-link';
  import { motion } from 'framer-motion';
  
  import Container from 'components/ui/Container';
  import TitleSection from 'components/ui/TitleSection';
  
  import * as Styled from './styles';
  
  const Posts = () => {
    const { markdownRemark, allMarkdownRemark } = useStaticQuery(graphql`
      query {
        markdownRemark(frontmatter: { category: { eq: "blog section" } }) {
          frontmatter {
            title
            subtitle
          }
        }
        allMarkdownRemark(
          filter: { frontmatter: { category: { eq: "blog" }, published: { eq: true } } }
          sort: { fields: frontmatter___date, order: DESC }
        ) {
          edges {
            node {
              id
              html
              fields {
                slug
              }
              frontmatter {
                title
                description
                date(formatString: "MMM DD, YYYY")
                tags
                cover {
                  childImageSharp {
                    fluid(maxWidth: 800) {
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          }
        }
      }
    `);
  
    const sectionTitle = markdownRemark.frontmatter;
    const posts = allMarkdownRemark.edges;
  
    return (
      <Container section>
        <TitleSection title={sectionTitle.title} subtitle={sectionTitle.subtitle} center />
        <Styled.Posts>
          {posts.map((item) => {
            const {
              id,
              fields: { slug },
              frontmatter: { title, description, date, tags }
            } = item.node;
  
            return (
              <Styled.Post key={id}>
                <Link to={slug}>
                  <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 1 }}>
                    <Styled.Card>
                      <Styled.Content>
                        <Styled.Date>{date}</Styled.Date>
                        <Styled.Title>{title}</Styled.Title>
                        <Styled.Description>{description}</Styled.Description>
                      </Styled.Content>
                      <Styled.Tags>
                        {tags.map((item) => (
                          <Styled.Tag key={item}>{item}</Styled.Tag>
                        ))}
                      </Styled.Tags>
                    </Styled.Card>
                  </motion.div>
                </Link>
              </Styled.Post>
            );
          })}
        </Styled.Posts>
      </Container>
    );
  };
  
  export default Posts;
  