From 787ee9d18d1f95755461f0c20443fab542cf78f9 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Mon, 31 Jan 2022 18:25:43 -0800
Subject: [PATCH] more progress on list of users

---
 .../web/components/v2/CreateConversation.tsx  | 24 +++++++++++++++----
 .../components/v2/KeyboardShortcutHandler.tsx | 23 ++++++++++++++++++
 packages/web/pages/s/index.tsx                |  3 +++
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 packages/web/components/v2/KeyboardShortcutHandler.tsx

diff --git a/packages/web/components/v2/CreateConversation.tsx b/packages/web/components/v2/CreateConversation.tsx
index d412108..0116370 100644
--- a/packages/web/components/v2/CreateConversation.tsx
+++ b/packages/web/components/v2/CreateConversation.tsx
@@ -1,5 +1,7 @@
 import { Select, Tag } from "antd";
+import Avatar from "antd/lib/avatar/avatar";
 import { useEffect, useRef } from "react";
+import { FaRegTimesCircle } from "react-icons/fa";
 
 const options = [
   { value: "gold" },
@@ -15,6 +17,10 @@ export default function CreateConversation() {
     input.current?.focus();
   }, []);
 
+  // as people are selected, add a list of users
+  // if it's an email of a non-nirvana user, then hit invite button to email them with a voice clip along with it
+  // if it's an existing user, then show a nice chip of that user's profile picture and their name
+
   return (
     <div className="mx-auto my-auto w-96">
       <Select
@@ -29,10 +35,20 @@ export default function CreateConversation() {
         ref={input}
       />
 
-      {/* list of existing conversations with these people */}
-      <span className="flex flex-col">
-        <span className="flex flex-row items-center p-5">
-          <span>Engineering</span>
+      {/* list of selected people who are nirvana users */}
+      <span className="flex flex-row flex-wrap mt-10">
+        <span className="flex flex-row items-center py-1 px-3 space-x-2 bg-sky-200 rounded-full">
+          <Avatar
+            src={"https://joeschmoe.io/api/v1/random"}
+            shape="square"
+            size={"small"}
+          />
+
+          <span className="text-sky-500 font-bold">{"Joe Smoe"}</span>
+
+          <button className="p-2 rounded-full hover:cursor-pointer text-sky-300">
+            <FaRegTimesCircle className="ml-auto text-lg" />
+          </button>
         </span>
       </span>
     </div>
diff --git a/packages/web/components/v2/KeyboardShortcutHandler.tsx b/packages/web/components/v2/KeyboardShortcutHandler.tsx
new file mode 100644
index 0000000..95a7ad5
--- /dev/null
+++ b/packages/web/components/v2/KeyboardShortcutHandler.tsx
@@ -0,0 +1,23 @@
+import Routes from "@nirvana/common/helpers/routes";
+import { useRouter } from "next/router";
+import { GlobalHotKeys, KeyMap, configure } from "react-hotkeys";
+
+configure({
+  ignoreTags: [],
+});
+
+export default function KeyboardShortcutHandler() {
+  const router = useRouter();
+
+  const handleEscape = () => {
+    console.log("woah");
+    router.push(Routes.convos);
+  };
+
+  const keyMap: KeyMap = {
+    ESCAPE: "esc",
+  };
+  const handlers = { ESCAPE: handleEscape };
+
+  return <GlobalHotKeys handlers={handlers} keyMap={keyMap} />;
+}
diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx
index 774e317..3630f10 100644
--- a/packages/web/pages/s/index.tsx
+++ b/packages/web/pages/s/index.tsx
@@ -16,6 +16,7 @@ import {
 } from "react-transition-group";
 import CreateConversation from "../../components/v2/CreateConversation";
 import { FaArrowLeft } from "react-icons/fa";
+import KeyboardShortcutHandler from "../../components/v2/KeyboardShortcutHandler";
 
 export default function Me() {
   // figure out what content to render from here
@@ -64,6 +65,8 @@ export default function Me() {
 
   return (
     <div className="flex flex-col">
+      <KeyboardShortcutHandler />
+
       <Header />
 
       {fullCleanPageContent ? (