starting the demo but shortcuts and all taking time

2022-01-20 21:27:17 -08:00
parent 5c964fe38c
commit 11a2ea1b84
5 changed files with 366 additions and 75 deletions
@@ -0,0 +1,64 @@
+import { Tooltip } from "antd";
+import { useState } from "react";
+import { FaPlay } from "react-icons/fa";
+import Announcements from "./Announcements";
+import TeamVoiceLine from "./TeamVoiceLine";
+
+export enum DemoStep {
+  playDemo = "play demo",
+  playIncomingMessage = "play incoming message",
+  sendReply = "send reply",
+  hearReply = "hear reply",
+  playAnnouncement = "play announcement",
+  resolveAnnouncement = "resolve announcement",
+}
+
+export interface IVoiceDemoProps {
+  demoStep: DemoStep;
+
+  handleChangeDemoStep: Function;
+}
+
+export default function VoiceLineConceptDemo() {
+  const [demoStep, setDemoStep] = useState<DemoStep>(DemoStep.playDemo);
+
+  function handleChangeStep(newStep: DemoStep) {
+    setDemoStep(newStep);
+  }
+
+  return (
+    <>
+      <TeamVoiceLine
+        demoStep={demoStep}
+        handleChangeDemoStep={handleChangeStep}
+      />
+
+      <Announcements
+        demoStep={demoStep}
+        handleChangeDemoStep={handleChangeStep}
+      />
+
+      {demoStep == DemoStep.playDemo ? (
+        <Tooltip title={"Make sure to have your speakers on!"}>
+          <button
+            onClick={() => setDemoStep(DemoStep.playIncomingMessage)}
+            className="absolute mx-auto my-auto left-1/2 top-1/2 
+      bg-gray-200 py-2 px-2 rounded font-semibold inline-flex items-center text-teal-600
+      space-x-2 animate-bounce"
+          >
+            <FaPlay /> <span>Play Demo</span>
+          </button>
+        </Tooltip>
+      ) : (
+        <button
+          onClick={() => setDemoStep(DemoStep.playDemo)}
+          className="absolute right-0 bottom-0
+      bg-gray-200 bg-opacity-30 py-2 px-2 rounded font-semibold inline-flex items-center text-teal-600
+      space-x-2"
+        >
+          <span>Reset Demo</span>
+        </button>
+      )}
+    </>
+  );
+}