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 }) => (
    <BannerImageFluid fluid={data.file.childImageSharp.fluid} alt="Lodge" />
    <p>Welcome to {data.site.siteMetadata.title}!</p>

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

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

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


I finished! On to the next chapter