starting the demo but shortcuts and all taking time

This commit is contained in:
Arjun Patel
2022-01-20 21:27:17 -08:00
parent 5c964fe38c
commit 11a2ea1b84
5 changed files with 366 additions and 75 deletions
+36 -17
View File
@@ -2,44 +2,55 @@ import { FaAngleDown, FaCheck, FaMicrophoneAlt, FaPlay } from "react-icons/fa";
import { UserStatus } from "../../models/user";
import Image from "next/image";
import { Tooltip } from "antd";
import { DemoStep, IVoiceDemoProps } from "./VoiceLineConceptDemo";
export default function Announcements(props: IVoiceDemoProps) {
const isAnnouncementsTurn =
props.demoStep == DemoStep.playAnnouncement ||
props.demoStep == DemoStep.resolveAnnouncement;
export default function Announcements() {
return (
<section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md -translate-x-20 backdrop-blur-xl">
<section
className={`p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md -translate-x-20 backdrop-blur-xl ${
!isAnnouncementsTurn ? "blur-sm" : ""
}`}
>
<span className="flex flex-row justify-start items-center pb-5">
<span className="flex flex-col mr-20">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
ANNOUNCEMENTS
<button
{/* <button
className="right-1 rounded-lg py-1 px-2 ml-1
shadow-md text-center text-gray-400 text-sm font-bold"
>
CTRL + A
</button>
</button> */}
</span>
<span className="text-gray-400 text-xs">
updates, pep talks, blockers, reminders
</span>
</span>
{/* tab pane */}
<span className="ml-auto flex flex-row space-x-5 uppercase mr-5">
<span className="underline underline-offset-8 decoration-gray-500 text-gray-500 hover:text-white hover:cursor-pointer">
<span className="underline underline-offset-8 decoration-gray-500 text-gray-500 hover:cursor-pointer">
Active
</span>
<span className="text-gray-400 hover:text-white hover:cursor-pointer">
Resolved
</span>
<span className="text-gray-400 hover:cursor-pointer">Resolved</span>
</span>
<span className="text-sm text-gray-400 flex flex-row items-center">
TODAY <FaAngleDown />
</span>
<button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
<FaMicrophoneAlt className="text-lg text-gray-500" />
</button>
<button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
<FaPlay className="text-lg text-gray-500" />
</button>
<Tooltip title={"You can create announcements in the future."}>
<button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
<FaMicrophoneAlt className="text-lg text-gray-500" />
</button>
</Tooltip>
</span>
<div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
@@ -86,9 +97,17 @@ export default function Announcements() {
</span>
</span>
<button className="bg-gray-500 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
<FaCheck className="text-lg text-gray-500" />
</button>
<Tooltip title={"Resolve"}>
<button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
<FaCheck className="text-lg text-gray-500" />
</button>
</Tooltip>
<Tooltip title={"Play"}>
<button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
<FaPlay className="text-lg text-gray-500" />
</button>
</Tooltip>
</span>
</div>
</section>