1 files changed, 47 insertions, 0 deletions
diff --git a/docs/src/components/KeymapUpgrader/index.jsx b/docs/src/components/KeymapUpgrader/index.jsx
new file mode 100644
index 0000000..8d3a60b
--- /dev/null
+++ b/docs/src/components/KeymapUpgrader/index.jsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import { useAsync } from "react-async";
+
+import { initParser, upgradeKeymap } from "@site/src/keymap-upgrade";
+import CodeBlock from "@theme/CodeBlock";
+
+import styles from "./styles.module.css";
+
+export default function KeymapUpgrader() {
+  const { error, isPending } = useAsync(initParser);
+
+  if (isPending) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p className="error">Error: {error.message}</p>;
+  }
+
+  return <Editor />;
+}
+
+function Editor() {
+  const [keymap, setKeymap] = React.useState("");
+  const upgraded = upgradeKeymap(keymap);
+
+  return (
+    <div>
+      <textarea
+        className={styles.editor}
+        placeholder="Paste keymap here"
+        spellCheck={false}
+        value={keymap}
+        onChange={(e) => setKeymap(e.target.value)}
+      ></textarea>
+      <div className={styles.result}>
+        <CodeBlock metastring={'title="Upgraded Keymap"'}>{upgraded}</CodeBlock>
+      </div>
+    </div>
+  );
+}