From 01ba42dd00d3b51802988814c522f4d5b59775dd Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Fri, 16 Oct 2020 12:25:21 +0530
Subject: [PATCH] MDNBadge - Add component

---
 components/MDNBadge.jsx        | 26 ++++++++++++++++++++++++++
 components/MDNBadge.module.css | 14 ++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 components/MDNBadge.jsx
 create mode 100644 components/MDNBadge.module.css

diff --git a/components/MDNBadge.jsx b/components/MDNBadge.jsx
new file mode 100644
index 0000000..df61ed7
--- /dev/null
+++ b/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,
+};
diff --git a/components/MDNBadge.module.css b/components/MDNBadge.module.css
new file mode 100644
index 0000000..53240fe
--- /dev/null
+++ b/components/MDNBadge.module.css
@@ -0,0 +1,14 @@
+.imgBlock {
+  height: 1.3em;
+}
+
+.imgInline {
+}
+
+.wrapperBlock {
+  display: block;
+  margin: 2px 0;
+}
+
+.wrapperInline {
+}