adding modal and stuff

2022-01-24 15:00:51 -08:00
parent ac58517e04
commit 135ad5441d
2 changed files with 63 additions and 14 deletions
@@ -0,0 +1,44 @@
+import { Modal } from "antd";
+import { useState } from "react";
+import { GlobalHotKeys, KeyMap } from "react-hotkeys";
+
+export default function ShortcutHelpModal() {
+  const [visible, setVisible] = useState<boolean>(true);
+
+  function handleToggleModal() {
+    setVisible((pv) => !pv);
+  }
+
+  const keyMap: KeyMap = {
+    SHOW_HELP_MODAL: "/",
+  };
+  const handlers = { SHOW_HELP_MODAL: handleToggleModal };
+
+  return (
+    <>
+      {/* fixed help on bottom left */}
+      <span
+        onClick={handleToggleModal}
+        className="hover:cursor-pointer fixed bottom-10 right-10 bg-gray-200 bg-opacity-80 py-2 px-3 rounded text-gray-500 flex flex-row items-center space-x-2"
+      >
+        <span>Help</span>
+
+        <button
+          className={`right-1 rounded-lg py-1 px-2 ml-1 
+           shadow-md text-center text-gray-500 text-sm font-bold`}
+        >
+          /
+        </button>
+      </span>
+
+      <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
+
+      <Modal
+        title="Help"
+        visible={visible}
+        onCancel={handleToggleModal}
+        onOk={handleToggleModal}
+      ></Modal>
+    </>
+  );
+}