From 493a4f3cd359b6d85f9dc36cabe6684f33dc75c3 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Tue, 25 Jan 2022 01:45:03 -0800 Subject: [PATCH] adding modal and a bunch of stuff in it --- components/Modals/ShortcutHelpModal.tsx | 301 +++++++++++++++--- .../illustrations/undraw_back_home_nl-5-c.svg | 1 + .../undraw_conference_speaker_re_1rna.svg | 1 + .../undraw_memory_storage_reh0.svg | 1 + .../undraw_tutorial_video_vtd1.svg | 1 + .../illustrations/undraw_working_re_ddwy.svg | 1 + 6 files changed, 270 insertions(+), 36 deletions(-) create mode 100644 public/illustrations/undraw_back_home_nl-5-c.svg create mode 100644 public/illustrations/undraw_conference_speaker_re_1rna.svg create mode 100644 public/illustrations/undraw_memory_storage_reh0.svg create mode 100644 public/illustrations/undraw_tutorial_video_vtd1.svg create mode 100644 public/illustrations/undraw_working_re_ddwy.svg diff --git a/components/Modals/ShortcutHelpModal.tsx b/components/Modals/ShortcutHelpModal.tsx index 838d66b..4e28ae3 100644 --- a/components/Modals/ShortcutHelpModal.tsx +++ b/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(false); - const carouselRef = useRef(); + const carouselRef = useRef(); + const { isRecording } = useKeyboardContext(); function handleShowModal() { @@ -59,26 +61,31 @@ export default function ShortcutHelpModal() { visible={visible} footer={<>} zIndex={5} + width={700} > - +
- + carouselRef.current.prev()} className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl" /> + Audio Messages + + carouselRef.current.next()} + className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl" + /> + + + Select a Teammate - + Type numbers on your keyboard. @@ -104,33 +111,33 @@ export default function ShortcutHelpModal() { ... - - carouselRef.current.next()} - className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl" + - - -
-
- - - carouselRef.current.prev()} - className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl" + + + + Send an Audio Message - - Press and hold R. Try it now! + + Press and hold R.{" "} + + Your teammate will

hear you instantly + {" "} + if they are online. + + + As if they were across the table. + + + + + + + + + + + + Clear Your View + + Deselect teammate and

stop playing audio by + pressing ESC. + + + + + + +
+
+ + + carouselRef.current.prev()} + className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl" + /> + + Audio Messages carouselRef.current.next()} @@ -148,17 +220,174 @@ export default function ShortcutHelpModal() { /> - + + + + Select a Teammate + + + Type numbers on your keyboard. + + + + + + + ... + + + + + + + + + + + + + Send an Audio Message + + + Press and hold R. Your teammate will hear you instantly if + they are logged in. + + + As if you were speaking over your shoulder. No + notifications. No scrolling. No reading. + + + + + + + + + + + + Play Incoming Message + + + Select teammate and then press SPACE

to listen to + the last conversation. + + {/* + Deselect teammate by pressing

ESC. + */} + + + + + + + + + + + + + + Clear Your View + + Deselect teammate and

stop playing audio by + pressing ESC. + + + + +
-

3

-
-
-

4

+ + + carouselRef.current.prev()} + className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl shrink-0" + /> + + + + Manage Your Drawer + + + Paste important links: Jira tickets, ppts, drive files, + github, code snippets. + + + + {" "} + {" "} + +{" "} + {" "} + + + + carouselRef.current.next()} + className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl shrink-0" + /> + + + +
diff --git a/public/illustrations/undraw_back_home_nl-5-c.svg b/public/illustrations/undraw_back_home_nl-5-c.svg new file mode 100644 index 0000000..7140ad5 --- /dev/null +++ b/public/illustrations/undraw_back_home_nl-5-c.svg @@ -0,0 +1 @@ +back_home \ No newline at end of file diff --git a/public/illustrations/undraw_conference_speaker_re_1rna.svg b/public/illustrations/undraw_conference_speaker_re_1rna.svg new file mode 100644 index 0000000..e226334 --- /dev/null +++ b/public/illustrations/undraw_conference_speaker_re_1rna.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/illustrations/undraw_memory_storage_reh0.svg b/public/illustrations/undraw_memory_storage_reh0.svg new file mode 100644 index 0000000..d518b3c --- /dev/null +++ b/public/illustrations/undraw_memory_storage_reh0.svg @@ -0,0 +1 @@ +Memory storage \ No newline at end of file diff --git a/public/illustrations/undraw_tutorial_video_vtd1.svg b/public/illustrations/undraw_tutorial_video_vtd1.svg new file mode 100644 index 0000000..c8428c9 --- /dev/null +++ b/public/illustrations/undraw_tutorial_video_vtd1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/illustrations/undraw_working_re_ddwy.svg b/public/illustrations/undraw_working_re_ddwy.svg new file mode 100644 index 0000000..aee7b00 --- /dev/null +++ b/public/illustrations/undraw_working_re_ddwy.svg @@ -0,0 +1 @@ + \ No newline at end of file