adding modal and stuff

components/Modals/ShortcutHelpModal.tsx

@@ -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>
+    </>
+  );
+}

pages/teams/[teamid].tsx

@@ -20,6 +20,7 @@ import UserService from "../../services/userService";
 import Announcements from "../../components/Dashboard/Announcements";
 import Links from "../../components/Dashboard/Links";
 import Office from "../../components/Dashboard/Office";
+import ShortcutHelpModal from "../../components/Modals/ShortcutHelpModal";
 
 // User has switched back to the tab
 const onFocus = () => {
@@ -82,25 +83,29 @@ function TeamDashboard() {
   }, []);
 
   return (
-    <div className="container mx-auto py-10 px-10 flex flex-col space-y-5">
-      <Header />
+    <>
+      <ShortcutHelpModal />
 
-      <div className="flex flex-row items-start space-x-5 h-[56rem]">
-        <div className="flex flex-col max-w-sm space-y-5 h-full">
-          <Office />
+      <div className="container mx-auto py-10 px-10 flex flex-col space-y-5">
+        <Header />
 
-          <TeamVoiceLine />
+        <div className="flex flex-row items-start space-x-5 h-[56rem]">
+          <div className="flex flex-col max-w-sm space-y-5 h-full">
+            <Office />
+
+            <TeamVoiceLine />
+          </div>
+
+          <div className="flex flex-col space-y-5 flex-1 h-full">
+            <Announcements />
+
+            <Rooms />
+          </div>
         </div>
 
-        <div className="flex flex-col space-y-5 flex-1 h-full">
-          <Announcements />
-
-          <Rooms />
-        </div>
+        <Links />
       </div>
-
-      <Links />
-    </div>
+    </>
   );
 }