text: import React from "react"
  import Layout from "../components/Layout"
  import { GatsbyImage, getImage } from "gatsby-plugin-image"
  import { graphql } from "gatsby"
  
  import {
    details,
    featured,
    htmlContainer,
  } from "../styles/project-details.module.css"
  
  function ProjectDetails({ data }) {
    const { html } = data.markdownRemark
    const { title, stack, featuredImg } = data.markdownRemark.frontmatter
  
    return (
      <Layout>
        <div className={details}>
          <h2>{title}</h2>
          <h3>{stack}</h3>
          <div className={featured}>
            <GatsbyImage
              image={getImage(featuredImg.childImageSharp.gatsbyImageData)}
              alt="featured"
            />
          </div>
          <div
            className={htmlContainer}
            dangerouslySetInnerHTML={{ __html: html }}
          />
        </div>
      </Layout>
    )
  }
  
  export default ProjectDetails
  
  export const query = graphql`
    query ProjectsDetailsPage($slug: String) {
      markdownRemark(frontmatter: { slug: { eq: $slug } }) {
        html
        frontmatter {
          stack
          title
          featuredImg {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  `
  