We've told Gatsby to build slugs and pages for our events pages, so now let's create a layout.

Create a new file under /src/pages called event-layout.js. We want to use a simple component as well as a page query.

To start, let's build a simple component that uses our MDX data:

// src/pages/event-layout.js
import React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "../components/Layout"

export default ({ data: { mdx } }) => {
  return (
    <Layout>
      <h3>Name: {mdx.frontmatter.title}</h3>
      <h3>Date: {mdx.frontmatter.date}</h3>
      <MDXRenderer>{mdx.body}</MDXRenderer>
    </Layout>
  )
}

The MDXRenderer is part of gatsby-plugin-mdx and is used to render the compiled body of our MDX.

How do we get the data we want to use in this component? We'll use a page query. Let's do that in the next video.