adding modal and a bunch of stuff in it

components/Modals/ShortcutHelpModal.tsx

@@ -1,4 +1,5 @@
-import { Carousel, Drawer, Modal } from "antd";
+import { Carousel, Divider, Drawer, Modal } from "antd";
+import { CarouselRef } from "antd/lib/carousel";
 import { useRef, useState } from "react";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { FaArrowLeft, FaArrowRight, FaUserCheck } from "react-icons/fa";
@@ -6,7 +7,8 @@ import { useKeyboardContext } from "../../contexts/keyboardContext";
 
 export default function ShortcutHelpModal() {
   const [visible, setVisible] = useState<boolean>(false);
-  const carouselRef = useRef<HTMLDivElement>();
+  const carouselRef = useRef<CarouselRef>();
+
   const { isRecording } = useKeyboardContext();
 
   function handleShowModal() {
@@ -59,26 +61,31 @@ export default function ShortcutHelpModal() {
         visible={visible}
         footer={<></>}
         zIndex={5}
+        width={700}
       >
-        <Carousel
+        <Carousel ref={carouselRef} dotPosition="top" className="pt-5">
-          // autoplay
-          ref={carouselRef}
-          dotPosition="top"
-          className="h-[20rem] pt-5"
-        >
           <div>
             <span className="flex flex-col px-10">
-              <span className="flex flex-row justify-between items-center mb-10">
+              <span className="flex flex-row justify-between items-start mb-10">
                 <FaArrowLeft
                   onClick={() => carouselRef.current.prev()}
                   className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
                 />
 
+                <span className="text-xl">Audio Messages</span>
+
+                <FaArrowRight
+                  onClick={() => carouselRef.current.next()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
+                />
+              </span>
+
+              <span className="flex flex-row justify-between items-center">
                 <span className="flex flex-col ml-2 items-center">
                   <span className="text-lg text-gray-500">
                     Select a Teammate
                   </span>
-                  <span className="text-md text-gray-300">
+                  <span className="text-md text-gray-300 text-center">
                     Type numbers on your keyboard.
                   </span>
 
@@ -104,33 +111,33 @@ export default function ShortcutHelpModal() {
                     <span className="text-gray-300">...</span>
                   </span>
                 </span>
-
+                <img
-                <FaArrowRight
+                  src="/illustrations/undraw_takeout_boxes_ap54.svg"
-                  onClick={() => carouselRef.current.next()}
+                  className="h-[10rem]"
-                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
                 />
               </span>
 
-              <img
+              <Divider />
-                src="/illustrations/undraw_takeout_boxes_ap54.svg"
+
-                className=""
+              <span className="flex flex-row justify-between items-center">
-              />
+                <img
-            </span>
+                  src="/illustrations/undraw_conference_speaker_re_1rna.svg"
-          </div>
+                  className="h-[10rem]"
-          <div>
-            <span className="flex flex-col px-10">
-              <span className="flex flex-row justify-between items-center mb-10">
-                <FaArrowLeft
-                  onClick={() => carouselRef.current.prev()}
-                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
                 />
 
                 <span className="flex flex-col ml-2 items-center">
                   <span className="text-lg text-gray-500">
                     Send an Audio Message
                   </span>
-                  <span className={`text-md text-gray-300`}>
+                  <span className={`text-md text-gray-300 text-center`}>
-                    Press and hold R. Try it now!
+                    Press and hold R.{" "}
+                    <span className="text-teal-600">
+                      Your teammate will <br></br> hear you instantly
+                    </span>{" "}
+                    if they are online.
+                  </span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    As if they were across the table.
                   </span>
 
                   <button
@@ -141,6 +148,71 @@ export default function ShortcutHelpModal() {
                     R
                   </button>
                 </span>
+              </span>
+
+              <Divider />
+
+              <span className="flex flex-row justify-between items-center">
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">
+                    Play Incoming Message
+                  </span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    Select teammate and then press SPACE <br></br> to listen to
+                    the last conversation.
+                  </span>
+                  {/* <span className={`text-md text-gray-300 text-center`}>
+                    Deselect teammate by pressing <br></br> ESC.
+                  </span> */}
+
+                  <button
+                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                  >
+                    SPACE
+                  </button>
+                </span>
+
+                <img
+                  src="/illustrations/undraw_tutorial_video_vtd1.svg"
+                  className="h-[10rem]"
+                />
+              </span>
+
+              <Divider />
+
+              <span className="flex flex-row justify-between items-center">
+                <img
+                  src="/illustrations/undraw_back_home_nl-5-c.svg"
+                  className="h-[10rem]"
+                />
+
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">Clear Your View</span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    Deselect teammate and <br></br> stop playing audio by
+                    pressing ESC.
+                  </span>
+
+                  <button
+                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                  >
+                    ESC
+                  </button>
+                </span>
+              </span>
+            </span>
+          </div>
+          <div>
+            <span className="flex flex-col px-10">
+              <span className="flex flex-row justify-between items-start mb-10">
+                <FaArrowLeft
+                  onClick={() => carouselRef.current.prev()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
+                />
+
+                <span className="text-xl">Audio Messages</span>
 
                 <FaArrowRight
                   onClick={() => carouselRef.current.next()}
@@ -148,17 +220,174 @@ export default function ShortcutHelpModal() {
                 />
               </span>
 
-              <img
+              <span className="flex flex-row justify-between items-center">
-                src="/illustrations/undraw_takeout_boxes_ap54.svg"
+                <span className="flex flex-col ml-2 items-center">
-                className=""
+                  <span className="text-lg text-gray-500">
-              />
+                    Select a Teammate
+                  </span>
+                  <span className="text-md text-gray-300 text-center">
+                    Type numbers on your keyboard.
+                  </span>
+
+                  <span className="flex flex-row space-x-2">
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      1
+                    </button>
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      2
+                    </button>
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      3
+                    </button>
+                    <span className="text-gray-300">...</span>
+                  </span>
+                </span>
+                <img
+                  src="/illustrations/undraw_takeout_boxes_ap54.svg"
+                  className="h-[10rem]"
+                />
+              </span>
+
+              <Divider />
+
+              <span className="flex flex-row justify-between items-center">
+                <img
+                  src="/illustrations/undraw_conference_speaker_re_1rna.svg"
+                  className="h-[10rem]"
+                />
+
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">
+                    Send an Audio Message
+                  </span>
+                  <span className={`text-md text-gray-300`}>
+                    Press and hold R. Your teammate will hear you instantly if
+                    they are logged in.
+                  </span>
+                  <span className={`text-md text-gray-300`}>
+                    As if you were speaking over your shoulder. No
+                    notifications. No scrolling. No reading.
+                  </span>
+
+                  <button
+                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold 
+                            ${isRecording ? "bg-orange-500 text-white" : ""}`}
+                  >
+                    R
+                  </button>
+                </span>
+              </span>
+
+              <Divider />
+
+              <span className="flex flex-row justify-between items-center">
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">
+                    Play Incoming Message
+                  </span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    Select teammate and then press SPACE <br></br> to listen to
+                    the last conversation.
+                  </span>
+                  {/* <span className={`text-md text-gray-300 text-center`}>
+                    Deselect teammate by pressing <br></br> ESC.
+                  </span> */}
+
+                  <button
+                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                  >
+                    SPACE
+                  </button>
+                </span>
+
+                <img
+                  src="/illustrations/undraw_tutorial_video_vtd1.svg"
+                  className="h-[10rem]"
+                />
+              </span>
+
+              <Divider />
+
+              <span className="flex flex-row justify-between items-center">
+                <img
+                  src="/illustrations/undraw_back_home_nl-5-c.svg"
+                  className="h-[10rem]"
+                />
+
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">Clear Your View</span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    Deselect teammate and <br></br> stop playing audio by
+                    pressing ESC.
+                  </span>
+
+                  <button
+                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                  >
+                    ESC
+                  </button>
+                </span>
+              </span>
             </span>
           </div>
           <div>
-            <h3>3</h3>
+            <span className="flex flex-col px-10">
-          </div>
+              <span className="flex flex-row justify-between items-start mb-10">
-          <div>
+                <FaArrowLeft
-            <h3>4</h3>
+                  onClick={() => carouselRef.current.prev()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl shrink-0"
+                />
+
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">
+                    Manage Your Drawer
+                  </span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    Paste important links: Jira tickets, ppts, drive files,
+                    github, code snippets.
+                  </span>
+
+                  <span className="flex flex-row items-center">
+                    {" "}
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      CTRL
+                    </button>{" "}
+                    +{" "}
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      V
+                    </button>{" "}
+                  </span>
+                </span>
+
+                <FaArrowRight
+                  onClick={() => carouselRef.current.next()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl shrink-0"
+                />
+              </span>
+
+              <img
+                src="/illustrations/undraw_conference_speaker_re_1rna.svg"
+                className="h-[10rem]"
+              />
+            </span>
           </div>
         </Carousel>
       </Modal>