basic create form but not done at all

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>
+  );
+}