talksik/nirvana-v3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

create channel form

Browse Source
This commit is contained in:
talksik
2022-05-17 04:19:59 -05:00
parent 07265603c3
commit d1a8ca2909
1 changed files with 59 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
+59 -57
View File
@@ -101,41 +101,67 @@ function LineDetails() {
const [peopleSearch, setPeopleSearch] = useState<string>(''); const [peopleSearch, setPeopleSearch] = useState<string>('');
return ( const showCreateChannel = false;
<div className="flex flex-col flex-1 items-center p-10 bg-gray-100 border-l border-l-gray-200"> if (showCreateChannel)
<div className="flex flex-col gap-2 max-w-lg w-full"> return (
{/* people search */} <div className="flex flex-col flex-1 items-center p-10 bg-gray-100 border-l border-l-gray-200">
<span className="text-gray-500">People</span> <div className="flex flex-col gap-2 max-w-lg w-full">
<div {/* people search */}
className="flex flex-row items-center space-x-2 bg-transparent <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" bg-gray-200 p-3 rounded"
> >
<FiUsers className="text-lg text-gray-400" /> <FiUsers className="text-lg text-gray-400" />
<input <input
placeholder="Search by name or email" placeholder="Search by name or email"
className="flex-1 text-lg bg-transparent placeholder-gray-300 focus:outline-none" className="flex-1 text-lg bg-transparent placeholder-gray-300 focus:outline-none"
onChange={(e) => setPeopleSearch(e.target.value)} onChange={(e) => setPeopleSearch(e.target.value)}
value={peopleSearch} value={peopleSearch}
/> />
</div> </div>
{/* dropdown search results */} {/* dropdown search results */}
<div className="flex flex-col shadow-lg max-h-[500px] overflow-auto"> <div className="flex flex-col shadow-lg max-h-[500px] overflow-auto">
{selectedLine.otherUserObjects.map((otherUser) => { {selectedLine.otherUserObjects.map((otherUser) => {
return ( return (
<div <div
key={otherUser.email} key={otherUser.email}
className="flex flex-row gap-2 items-center p-2 border border-gray-200 className="flex flex-row gap-2 items-center p-2 border border-gray-200
hover:bg-gray-200 cursor-pointer" hover:bg-gray-200 cursor-pointer"
> >
<Avatar src={otherUser.picture} size={'large'} shape={'square'} /> <Avatar src={otherUser.picture} size={'large'} shape={'square'} />
<span className="flex flex-col gap-1"> <span className="flex flex-col gap-1">
<span className="text-md font-semibold text-gray-600">{otherUser.name}</span> <span className="text-md font-semibold text-gray-600">{otherUser.name}</span>
<span className="text-sm text-gray-400">{otherUser.email}</span> <span className="text-sm text-gray-400">{otherUser.email}</span>
</span> </span>
</div> </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) => { {selectedLine.otherUserObjects.map((otherUser) => {
return ( return (
@@ -153,32 +179,8 @@ function LineDetails() {
); );
})} })}
</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 (
<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>
</div> );
);
return ( return (
<div <div