MDNBadge - Add component

components/MDNBadge.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styles from "./MDNBadge.module.css";
+
+export default function MDNBadge({ title, url, i }) {
+  // i stands for "is inline?" - default false
+  const wrapperClass = i ? wrapperInline : styles.wrapperBlock;
+  const imgClass = i ? imgInline : styles.imgBlock;
+
+  return (
+    <a
+      href={url}
+      className={wrapperClass}
+      target="_blank"
+      rel="noopener noreferer"
+    >
+      <img
+        className={imgClass}
+        src={`https://img.shields.io/badge/MDN-${title}-c2e8f9?logo=MDN%20Web%20Docs&style=flat-square`}
+      />
+    </a>
+  );
+}
+
+MDNBadge.defaultProps = {
+  i: false,
+};

components/MDNBadge.module.css

@@ -0,0 +1,14 @@
+.imgBlock {
+  height: 1.3em;
+}
+
+.imgInline {
+}
+
+.wrapperBlock {
+  display: block;
+  margin: 2px 0;
+}
+
+.wrapperInline {
+}