adding modal and a bunch of stuff in it
This commit is contained in:
Arjun Patel
@@ -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
|
||||
// autoplay
|
||||
ref={carouselRef}
|
||||
dotPosition="top"
|
||||
className="h-[20rem] pt-5"
|
||||
>
|
||||
<Carousel ref={carouselRef} dotPosition="top" className="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>
|
||||
|
||||
<FaArrowRight
|
||||
onClick={() => carouselRef.current.next()}
|
||||
className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
|
||||
<img
|
||||
src="/illustrations/undraw_takeout_boxes_ap54.svg"
|
||||
className="h-[10rem]"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<img
|
||||
src="/illustrations/undraw_takeout_boxes_ap54.svg"
|
||||
className=""
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<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"
|
||||
<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. Try it now!
|
||||
<span className={`text-md text-gray-300 text-center`}>
|
||||
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
|
||||
src="/illustrations/undraw_takeout_boxes_ap54.svg"
|
||||
className=""
|
||||
/>
|
||||
<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 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>
|
||||
</div>
|
||||
<div>
|
||||
<h3>4</h3>
|
||||
<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 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>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
Reference in New Issue
Block a user