feat: MDX image component

src/components/Image.js

@@ -1,32 +1,18 @@
 import React from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
-import Img from 'gatsby-image';
+import PropTypes from 'prop-types';
 
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
- */
+const Image = ({ src, alt, width }) => {
+  return <img src={src} alt={alt} width={width} />;
+};
 
-const Image = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `);
+Image.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  width: PropTypes.number,
+};
 
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
+Image.defaultProps = {
+  width: 1200,
 };
 
 export default Image;

src/components/MDXContainer.js

@@ -12,6 +12,7 @@ import Important from './Important';
 import Tip from './Tip';
 import Intro from './Intro';
 import MDXCodeBlock from './MDXCodeBlock';
+import Image from './Image';
 
 import styles from './MDXContainer.module.scss';
 
@@ -23,6 +24,7 @@ const components = {
   Important,
   Tip,
   Intro,
+  Image,
   code: MDXCodeBlock,
   pre: (props) => props.children,
 };