import React from 'react';
import Navbar from '../components/navbar';
import { graphql } from 'gatsby';
import { MDXRenderer } from 'gatsby-plugin-mdx';

export default ({ data }) => {
  const { frontmatter, body } = data.mdx;
  return (
    <>
      <Navbar />
      <main>
        <h1>{frontmatter.title}</h1>
        <h5>{frontmatter.subtitle}</h5>
        <MDXRenderer>{body}</MDXRenderer>
      </main>
    </>
  );
};

export const query = graphql`
  query ProjectsItemQuery($id: String!) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
        subtitle
      }
      tableOfContents
      body
    }
  }
`;