We've used a similar image component a few different times already, so let's just extract that into its own file.

Create a new file under src/components called BannerImageFluid.js. Copy the component we made in the last video, paste it in, and export it. We'll also need to add imports for Gatsby Image and styled-components. The code will look like this:

// src/components/BannerImageFluid.js
import Image from "gatsby-image"
import styled from "styled-components"

export default styled(Image)`
  border-radius: 10px;
  max-width: 400px;
  margin-top: 20px;
`

Now, in both index.js and event-layout.js, we can import this file:

import BannerImageFluid from "../components/BannerImageFluid"

Finally, we can replace both image components with BannerImageFluid. In index.js, it will look like this:

// src/pages/index.js
export default ({ data }) => (
  <Layout>
    <BannerImageFluid fluid={data.file.childImageSharp.fluid} alt="Lodge" />
    <p>Welcome to {data.site.siteMetadata.title}!</p>
  </Layout>
)

In event-layout.js, it will look like this:

// src/pages/event-layout.js
export default ({ data: { mdx } }) => {
  return (
    <Layout>
      {mdx.frontmatter.banner && (
        <BannerImageFluid
          fluid={mdx.frontmatter.banner.childImageSharp.fluid}
          alt="Banner Image"
        />
      )}
      <h3>Name: {mdx.frontmatter.title}</h3>
      <h3>Date: {mdx.frontmatter.date}</h3>
      <h3>Category: {mdx.frontmatter.category}</h3>
      <MDXRenderer>{mdx.body}</MDXRenderer>
    </Layout>
  )
}

That's it! Now, let's learn how we can add inline images in our Markdown files.