2 files changed, 131 insertions, 0 deletions
diff --git a/client/src/components/KeyboardModal/KeyboardModal.jsx b/client/src/components/KeyboardModal/KeyboardModal.jsx
new file mode 100644
index 0000000..6ba8536
--- /dev/null
+++ b/client/src/components/KeyboardModal/KeyboardModal.jsx
@@ -0,0 +1,71 @@
+import React, { useRef, useState, useEffect } from "react";
+import styles from "./KeyboardModal.module.css";
+
+const KeyboardModal = ({ textAreaRef, isOpen, setIsOpen, isModalOpen }) => {
+  const keyboardModalRef = useRef(null);
+
+  const handleClickOutside = (event) => {
+    if (
+      keyboardModalRef.current &&
+      !keyboardModalRef.current.contains(event.target)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  const handleKeyDown = (event) => {
+    if (!isModalOpen && event.ctrlKey && event.key === "k") {
+      event.preventDefault();
+      if (textAreaRef.current) {
+        textAreaRef.current.blur();
+      }
+      setIsOpen(true);
+    } else if (isOpen && event.key === "Escape") {
+      setIsOpen(false);
+      if (textAreaRef.current) {
+        textAreaRef.current.focus();
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  return (
+    isOpen && (
+      <div className={`${styles.background} ${styles.active}`}>
+        <div ref={keyboardModalRef} className={styles.container}>
+          <button
+            className={styles.container__close}
+            onClick={() => setIsOpen(false)}
+          >
+            <span>&#10007;</span>
+          </button>
+          <p className={styles.container__title}>Keyboard Shortcuts</p>
+          <div className={styles.container__shortcuts}>
+            <p>
+              <span className={styles.container__shortcut__key}>Ctrl + K</span>
+              Open Keyboard Shortcuts
+            </p>
+            <p>
+              <span className={styles.container__shortcut__key}>Ctrl + L</span>
+              Open Language Selector
+            </p>
+            <p>
+              <span className={styles.container__shortcut__key}>Ctrl + S</span>
+              Save Bin
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default KeyboardModal;
diff --git a/client/src/components/KeyboardModal/KeyboardModal.module.css b/client/src/components/KeyboardModal/KeyboardModal.module.css
new file mode 100644
index 0000000..9daecca
--- /dev/null
+++ b/client/src/components/KeyboardModal/KeyboardModal.module.css
@@ -0,0 +1,60 @@
+.background {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #00000062;
+  z-index: 10;
+}
+
+.active {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  top: 0;
+  left: 0;
+  background-color: var(--color-dark);
+  padding: 30px;
+  border-radius: 10px;
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-light);
+}
+
+.container__title {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.container__shortcuts {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.container__shortcut__key {
+  color: var(--color-yellow);
+  margin-right: 15px;
+}
+
+.container__close {
+  cursor: pointer;
+  background: none;
+  border: none;
+  margin-left: auto;
+  margin-bottom: 10px;
+  color: inherit;
+  font-size: 2rem;
+  &:hover {
+    transform: scale(0.9);
+  }
+}