docs(codes): Add (key) codes documentation

Create codes documentation for standardized keys.

Closes #218.  Fixes #308.  Ref #21.

1 files changed, 43 insertions, 0 deletions

diff --git a/docs/src/components/codes/FootnoteRefs.jsx b/docs/src/components/codes/FootnoteRefs.jsx
new file mode 100644
index 0000000..3782c13
--- /dev/null
+++ b/docs/src/components/codes/FootnoteRefs.jsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import FootnoteRef from "./FootnoteRef";
+
+function joinReactElements(arr, delimiter) {
+  return arr.reduce((acc, fragment) => {
+    if (acc === null) {
+      return fragment;
+    }
+    return (
+      <>
+        {acc}
+        {delimiter}
+        {fragment}
+      </>
+    );
+  }, null);
+}
+
+export default function FootnoteRefs({ footnotes }) {
+  return (
+    <span className="footnoteRefs">
+      {joinReactElements(
+        footnotes.map((footnote) => (
+          <FootnoteRef key={footnote.reference} {...footnote}>
+            {footnote.symbol}
+          </FootnoteRef>
+        )),
+        ", "
+      )}
+    </span>
+  );
+}
+
+FootnoteRefs.propTypes = {
+  footnotes: PropTypes.array.isRequired,
+};