text: import React from 'react';
  import { Link, graphql } from 'gatsby';
  import { MDXRenderer } from 'gatsby-plugin-mdx';
  
  import Layout from '../components/Layout/layout';
  import SEO from '../components/seo';
  import { rhythm } from '../utils/typography';
  import { TitleWrapper, Home, Date } from './blog-post.styled';
  import { FiHome } from 'react-icons/fi';
  
  class BlogPostTemplate extends React.Component {
    render() {
      const post = this.props.data.mdx;
      const siteTitle = this.props.data.site.siteMetadata.title;
      const { previous, next } = this.props.pageContext;
      return (
        <Layout location={this.props.location} title={siteTitle}>
          <SEO
            title={post.frontmatter.title}
            description={post.frontmatter.description || post.excerpt}
          />
  
          <TitleWrapper>
            <h1 style={{ marginTop: 0 }}>{post.frontmatter.title}</h1>
            <Link to={'/'} style={{ boxShadow: 'none' }}>
              <Home>
                <FiHome size={15} style={{ marginRight: '.5rem' }} />
                Home
              </Home>
            </Link>
          </TitleWrapper>
  
          <Date>{post.frontmatter.date}</Date>
  
          <MDXRenderer>{post.body}</MDXRenderer>
          <hr
            style={{
              marginBottom: rhythm(1)
            }}
          />
  
          <ul
            style={{
              display: `flex`,
              flexWrap: `wrap`,
              justifyContent: `space-between`,
              listStyle: `none`,
              padding: 0
            }}
          >
            <li>
              {previous && (
                <Link to={`/blog${previous.fields.slug}`} rel="prev">
                  ← {previous.frontmatter.title} ola
                </Link>
              )}
            </li>
            <li>
              {next && (
                <Link to={`/blog${next.fields.slug}`} rel="next">
                  {next.frontmatter.title} →
                </Link>
              )}
            </li>
          </ul>
        </Layout>
      );
    }
  }
  
  export default BlogPostTemplate;
  
  export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      site {
        siteMetadata {
          title
          author
        }
      }
      mdx(fields: { slug: { eq: $slug } }) {
        id
        excerpt(pruneLength: 160)
        body
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          description
        }
      }
    }
  `;
  