From d1a8ca29090fb0c1a33d976b8981e7f2069c1508 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Tue, 17 May 2022 04:19:59 -0500
Subject: [PATCH] create channel form

---
 .../protected/terminal/panels/MainPanel.tsx   | 116 +++++++++---------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
index 85fb240..5529faf 100644
--- a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
+++ b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
@@ -101,41 +101,67 @@ function LineDetails() {
 
   const [peopleSearch, setPeopleSearch] = useState<string>('');
 
-  return (
-    <div className="flex flex-col flex-1 items-center p-10 bg-gray-100 border-l border-l-gray-200">
-      <div className="flex flex-col gap-2 max-w-lg w-full">
-        {/* people search */}
-        <span className="text-gray-500">People</span>
-        <div
-          className="flex flex-row items-center space-x-2 bg-transparent
+  const showCreateChannel = false;
+  if (showCreateChannel)
+    return (
+      <div className="flex flex-col flex-1 items-center p-10 bg-gray-100 border-l border-l-gray-200">
+        <div className="flex flex-col gap-2 max-w-lg w-full">
+          {/* people search */}
+          <span className="text-gray-500">People</span>
+          <div
+            className="flex flex-row items-center space-x-2 bg-transparent
          bg-gray-200 p-3 rounded"
-        >
-          <FiUsers className="text-lg text-gray-400" />
-          <input
-            placeholder="Search by name or email"
-            className="flex-1 text-lg bg-transparent placeholder-gray-300 focus:outline-none"
-            onChange={(e) => setPeopleSearch(e.target.value)}
-            value={peopleSearch}
-          />
-        </div>
+          >
+            <FiUsers className="text-lg text-gray-400" />
+            <input
+              placeholder="Search by name or email"
+              className="flex-1 text-lg bg-transparent placeholder-gray-300 focus:outline-none"
+              onChange={(e) => setPeopleSearch(e.target.value)}
+              value={peopleSearch}
+            />
+          </div>
 
-        {/* dropdown search results */}
-        <div className="flex flex-col shadow-lg max-h-[500px] overflow-auto">
-          {selectedLine.otherUserObjects.map((otherUser) => {
-            return (
-              <div
-                key={otherUser.email}
-                className="flex flex-row gap-2 items-center p-2 border border-gray-200
+          {/* dropdown search results */}
+          <div className="flex flex-col shadow-lg max-h-[500px] overflow-auto">
+            {selectedLine.otherUserObjects.map((otherUser) => {
+              return (
+                <div
+                  key={otherUser.email}
+                  className="flex flex-row gap-2 items-center p-2 border border-gray-200
                 hover:bg-gray-200 cursor-pointer"
-              >
-                <Avatar src={otherUser.picture} size={'large'} shape={'square'} />
-                <span className="flex flex-col gap-1">
-                  <span className="text-md font-semibold text-gray-600">{otherUser.name}</span>
-                  <span className="text-sm text-gray-400">{otherUser.email}</span>
-                </span>
-              </div>
-            );
-          })}
+                >
+                  <Avatar src={otherUser.picture} size={'large'} shape={'square'} />
+                  <span className="flex flex-col gap-1">
+                    <span className="text-md font-semibold text-gray-600">{otherUser.name}</span>
+                    <span className="text-sm text-gray-400">{otherUser.email}</span>
+                  </span>
+                </div>
+              );
+            })}
+
+            {selectedLine.otherUserObjects.map((otherUser) => {
+              return (
+                <div
+                  key={otherUser.email}
+                  className="flex flex-row gap-2 items-center p-2 border border-gray-200
+                hover:bg-gray-200 cursor-pointer"
+                >
+                  <Avatar src={otherUser.picture} size={'large'} shape={'square'} />
+                  <span className="flex flex-col gap-1">
+                    <span className="text-md font-semibold text-gray-600">{otherUser.name}</span>
+                    <span className="text-sm text-gray-400">{otherUser.email}</span>
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* selected people */}
+          <span className="flex flex-row justify-between mt-5">
+            <span className="text-gray-500 ">{`Selected`}</span>
+
+            <span className="text-gray-400">{selectedLine.otherMembers.length}/7</span>
+          </span>
 
           {selectedLine.otherUserObjects.map((otherUser) => {
             return (
@@ -153,32 +179,8 @@ function LineDetails() {
             );
           })}
         </div>
-
-        {/* selected people */}
-        <span className="flex flex-row justify-between mt-5">
-          <span className="text-gray-500 ">{`Selected`}</span>
-
-          <span className="text-gray-400">{selectedLine.otherMembers.length}/7</span>
-        </span>
-
-        {selectedLine.otherUserObjects.map((otherUser) => {
-          return (
-            <div
-              key={otherUser.email}
-              className="flex flex-row gap-2 items-center p-2 border border-gray-200
-                hover:bg-gray-200 cursor-pointer"
-            >
-              <Avatar src={otherUser.picture} size={'large'} shape={'square'} />
-              <span className="flex flex-col gap-1">
-                <span className="text-md font-semibold text-gray-600">{otherUser.name}</span>
-                <span className="text-sm text-gray-400">{otherUser.email}</span>
-              </span>
-            </div>
-          );
-        })}
       </div>
-    </div>
-  );
+    );
 
   return (
     <div