From 3c3ae94e858d5936cb18f2c97536d86a7a7d7e2e Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Mon, 31 Jan 2022 17:41:37 -0800
Subject: [PATCH] basic create form but not done at all

---
 .../web/components/v2/CreateConversation.tsx  | 49 ++++++++++++++++++-
 packages/web/pages/s/index.tsx                |  3 +-
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/v2/CreateConversation.tsx b/packages/web/components/v2/CreateConversation.tsx
index 4d20f06..1d5d6eb 100644
--- a/packages/web/components/v2/CreateConversation.tsx
+++ b/packages/web/components/v2/CreateConversation.tsx
@@ -1,7 +1,52 @@
+import { Select, Tag } from "antd";
+
+const options = [
+  { value: "gold" },
+  { value: "lime" },
+  { value: "green" },
+  { value: "cyan" },
+];
+
 export default function CreateConversation() {
   return (
-    <div className="mx-auto my-auto">
-      <input className="p-2 rounded border" />
+    <div className="mx-auto my-auto w-96">
+      <Select
+        placeholder={"Please select people to start the conversation with"}
+        mode="multiple"
+        showArrow
+        tagRender={tagRender}
+        defaultValue={["gold", "cyan"]}
+        style={{ width: "100%" }}
+        options={options}
+        size="large"
+        className=""
+      />
+
+      {/* list of existing conversations with these people */}
+      <span className="flex flex-col">
+        <span className="flex flex-row items-center p-5">
+          <span>Engineering</span>
+        </span>
+      </span>
     </div>
   );
 }
+
+function tagRender(props) {
+  const { label, value, closable, onClose } = props;
+  const onPreventMouseDown = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return (
+    <Tag
+      color={value}
+      onMouseDown={onPreventMouseDown}
+      closable={closable}
+      onClose={onClose}
+      style={{ marginRight: 3 }}
+    >
+      {label}
+    </Tag>
+  );
+}
diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx
index 79cbc84..774e317 100644
--- a/packages/web/pages/s/index.tsx
+++ b/packages/web/pages/s/index.tsx
@@ -57,7 +57,7 @@ export default function Me() {
    *    4. profile edit? nah not needed...just keep current separate page
    */
 
-  var fullCleanPageContent: ReactElement = <></>;
+  var fullCleanPageContent: ReactElement = undefined;
   if (currRoute === Routes.createConvo) {
     fullCleanPageContent = <CreateConversation />;
   }
@@ -71,6 +71,7 @@ export default function Me() {
           <div className="flex flex-row">
             <span className="flex flex-col items-center">
               <button
+                onClick={() => router.push(Routes.convos)}
                 className="rounded-lg p-2 border flex flex-row items-center space-x-2
             text-slate-400 text-xs hover:bg-slate-50"
               >