building a lot of the modal for the creating room and close to being done

components/Modals/CreateRoom.tsx

@@ -1,18 +1,21 @@
-import { Modal } from "antd";
-import { useEffect } from "react";
+import { Divider, Modal, Select } from "antd";
+import React, { useEffect, useState } from "react";
 import {
   ShowModalType,
   useKeyboardContext,
 } from "../../contexts/keyboardContext";
 
+const { Option } = Select;
+
 const thisModalType = ShowModalType.createRoom;
 
 export default function CreateRoomModal() {
   const { pastedLink, handleModalType, showModalType } = useKeyboardContext();
 
   useEffect(() => {
-    // check if link is valid google meet link
-  }, []);
+    // todo: check if link is valid google meet link? again?
+    setRoomLink(pastedLink);
+  }, [pastedLink]);
 
   const handleCloseModal = () => {
     handleModalType(ShowModalType.na);
@@ -20,6 +23,36 @@ export default function CreateRoomModal() {
 
   const handleSubmit = () => {};
 
+  const [roomLink, setRoomLink] = useState<string>(pastedLink);
+  const [membersSelected, setMembersSelected] = useState<string[]>([]);
+
+  function handleSelectMember(value) {
+    // setMemberSelection()
+    console.log(value);
+  }
+
+  const children = [];
+  for (let i = 10; i < 36; i++) {
+    children.push(
+      <Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>
+    );
+  }
+
+  const MemberSelection = () => {
+    return (
+      <Select
+        mode="multiple"
+        allowClear
+        style={{ width: "100%" }}
+        placeholder="Please select"
+        defaultValue={["a10", "c12"]}
+        onChange={handleSelectMember}
+      >
+        {children}
+      </Select>
+    );
+  };
+
   return (
     <Modal
       title="Create Room"
@@ -28,9 +61,68 @@ export default function CreateRoomModal() {
       onOk={handleSubmit}
       onCancel={handleCloseModal}
     >
-      <p>some contents...</p>
-      <p>some contents...</p>
-      <p>some contents...</p>
+      <div className="flex flex-col">
+        <span className="flex flex-col items-start">
+          <span className="text-md">Link</span>
+          <span className="text-gray-300 text-xs mb-2">
+            Please make sure this is valid so that your team can join properly.
+          </span>
+          <input
+            className="w-full rounded-lg bg-gray-50 p-3"
+            value={roomLink}
+            onChange={(e) => setRoomLink(e.target.value)}
+          />
+        </span>
+
+        <div className="flex flex-row justify-between space-x-3 mt-4">
+          <span className="flex flex-col items-start flex-1 ">
+            <span className="text-md">Room Name</span>
+            <span className="text-gray-300 text-xs mb-2 flex-1">
+              Be specific enough, everyone down the hall will see this.
+            </span>
+            <input
+              placeholder="ex. Design - Ecommerce Figma"
+              className="w-full rounded-lg bg-gray-50 p-3"
+              value={""}
+              onChange={(e) => setRoomLink(e.target.value)}
+            />
+          </span>
+        </div>
+
+        <Divider />
+
+        <span className="flex flex-col items-start flex-1 mt-4">
+          <span className="text-md">People</span>
+          <span className="text-gray-300 text-xs mb-2 flex-1">
+            Optional - Add anyone you want or just tell them later.
+          </span>
+          {MemberSelection()}
+        </span>
+
+        <span className="flex flex-col items-start flex-1 mt-4">
+          <span className="text-md">Subtitle</span>
+          <span className="text-gray-300 text-xs mb-2 flex-1">Optional</span>
+          <input
+            placeholder="ex. Looking for feedback if..."
+            className="w-full rounded-lg bg-gray-50 p-3"
+            value={""}
+            onChange={(e) => setRoomLink(e.target.value)}
+          />
+        </span>
+
+        <span className="flex flex-col items-start flex-1 mt-4">
+          <span className="text-md">Attachment</span>
+          <span className="text-gray-300 text-xs mb-2">
+            Optional - add a ppt or meeting notes for people to follow along
+          </span>
+          <input
+            placeholder="https://"
+            className="w-full rounded-lg bg-gray-50 p-3"
+            value={""}
+            onChange={(e) => setRoomLink(e.target.value)}
+          />
+        </span>
+      </div>
     </Modal>
   );
 }