text: import * as React from "react"
  import { Link, graphql } from "gatsby"
  import Layout from "../components/OnPagesLayout"
  import Seo from "../components/seo"
  import { makeStyles } from "@material-ui/core/styles"
  import Paper from "@mui/material/Paper"
  const useStyles = makeStyles(({ breakpoints, spacing }) => ({
    imgContainer: {
      width: "100%",
      display: "flex",
      justifyContent: "center",
      alignContent: "center",
    },
    img: {
      objectFit: "contain",
      borderRadius: "10%",
    },
    Container: {
      width: "100%",
      paddingLeft: "10%",
      paddingRight: "10%",
    },
    PostArea: {
      padding: "8px",
    },
  }))
  
  const BlogPostTemplate = ({ data, location }) => {
    const styles = useStyles()
    const post = data.markdownRemark
    const siteTitle = data.site.siteMetadata?.title || `Title`
    const { previous, next } = data
  
    return (
      <Layout location={location} title={siteTitle}>
        <Seo
          title={post.frontmatter.title}
          description={post.frontmatter.description || post.excerpt}
        />
        <article
          className={styles.Container}
          itemScope
          itemType="http://schema.org/Article"
        >
          <Paper className={styles.PostArea} elevation={12}>
            <header>
              <div className={styles.imgContainer}>
                {post.frontmatter.thumbnail && (
                  <img
                    src={post.frontmatter.thumbnail}
                    width={"100%"}
                    height={280}
                    alt=""
                    className={styles.img}
                  />
                )}
              </div>
              <h1 itemProp="headline">{post.frontmatter.title}</h1>
              <p>{post.frontmatter.date}</p>
            </header>
            <section
              dangerouslySetInnerHTML={{ __html: post.html }}
              itemProp="articleBody"
            />
            <hr />
          </Paper>
        </article>
        <nav className="blog-post-nav">
          <ul
            style={{
              display: `flex`,
              flexWrap: `wrap`,
              justifyContent: `space-between`,
              listStyle: `none`,
              padding: 0,
            }}
          >
            <li>
              {previous && (
                <Link to={previous.fields.slug} rel="prev">
                  ← {previous.frontmatter.title}
                </Link>
              )}
            </li>
            <li>
              {next && (
                <Link to={next.fields.slug} rel="next">
                  {next.frontmatter.title} →
                </Link>
              )}
            </li>
          </ul>
        </nav>
      </Layout>
    )
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
    query BlogPostBySlug(
      $id: String!
      $previousPostId: String
      $nextPostId: String
    ) {
      site {
        siteMetadata {
          title
        }
      }
      markdownRemark(id: { eq: $id }) {
        id
        excerpt(pruneLength: 160)
        html
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          description
          thumbnail
        }
      }
      previous: markdownRemark(id: { eq: $previousPostId }) {
        fields {
          slug
        }
        frontmatter {
          title
        }
      }
      next: markdownRemark(id: { eq: $nextPostId }) {
        fields {
          slug
        }
        frontmatter {
          title
        }
      }
    }
  `
  