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

creating main flow for the create conversation page

Browse Source
This commit is contained in:
Arjun Patel
2022-01-31 19:04:03 -08:00
parent 787ee9d18d
commit d9c82659bb
2 changed files with 123 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/components/v2/CreateConversation.tsx
+76 -7
View File
@@ -1,7 +1,7 @@
import { Select, Tag } from "antd";
import Avatar from "antd/lib/avatar/avatar";
import { useEffect, useRef } from "react";
import { FaRegTimesCircle } from "react-icons/fa";
import { FaPaperPlane, FaRegTimesCircle } from "react-icons/fa";
const options = [
{ value: "gold" },
@@ -22,9 +22,9 @@ export default function CreateConversation() {
// if it's an existing user, then show a nice chip of that user's profile picture and their name
return (
<div className="mx-auto my-auto w-96">
<div className="mx-auto my-auto w-96 flex flex-col">
<Select
placeholder={"Look up email addresses, names, etc."}
placeholder={"Look up emails, names, etc."}
tagRender={tagRender}
style={{ width: "100%" }}
options={options}
@@ -35,22 +35,91 @@ export default function CreateConversation() {
ref={input}
/>
<span className="flex flex-row items-center mt-10 mb-2">
<span className="uppercase tracking-widest text-slate-400 font-semibold">
Selected
</span>
<button className="ml-auto text-slate-400">clear</button>
</span>
{/* list of selected people who are nirvana users */}
<span className="flex flex-row flex-wrap mt-10">
<span className="flex flex-row items-center py-1 px-3 space-x-2 bg-sky-200 rounded-full">
<span className="flex flex-col">
<span className="flex flex-row items-center py-1 border-t">
<Avatar shape="square" size={"small"}>
A
</Avatar>
<span className="flex flex-col ml-2">
<span className="text-slate-400 text-xs">
{"ariel@microsoft.com"}
</span>
<span className="text-orange-500 text-xs">
Not a valid Nirvana user.
</span>
</span>
<button className="p-2 rounded-full hover:cursor-pointer text-sky-500 ml-auto">
<FaPaperPlane className="ml-auto text-lg" />
</button>
</span>
<span className="flex flex-row items-center py-1 border-t">
<Avatar
src={"https://joeschmoe.io/api/v1/random"}
shape="square"
size={"small"}
/>
<span className="text-sky-500 font-bold">{"Joe Smoe"}</span>
<span className="flex flex-col ml-2">
<span className="text-teal-500 font-bold">{"Joe Smoe"}</span>
<span className="text-slate-400 text-xs">
{"joe@microsoft.com"}
</span>
</span>
<button className="p-2 rounded-full hover:cursor-pointer text-sky-300">
<button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
<FaRegTimesCircle className="ml-auto text-lg" />
</button>
</span>
<span className="flex flex-row items-center py-1 border-t">
<Avatar
src={"https://joeschmoe.io/api/v1/2"}
shape="square"
size={"small"}
/>
<span className="flex flex-col ml-2">
<span className="text-teal-500 font-bold">{"Elon Musk"}</span>
<span className="text-slate-400 text-xs">{"musk@tesla.com"}</span>
</span>
<button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
<FaRegTimesCircle className="ml-auto text-lg" />
</button>
</span>
</span>
<span className="flex flex-col mt-10">
<span className="uppercase tracking-widest text-slate-400 font-semibold">
Name
</span>
<span className="text-slate-300 text-xs">
Name this conversation: engineering, hangout, lunch time, or leave it
as is.
</span>
<input
className="p-2 rounded mt-2 bg-slate-50"
placeholder="engineering, hangout, kitchen..."
/>
</span>
<button
className="rounded p-2 border flex flex-row items-center space-x-2
text-white font-semibold text-xs ml-auto mt-5 bg-teal-600 hover:scale-110 transition-all"
>
<span>Create</span>
</button>
</div>
);
}
packages/web/pages/s/index.tsx
+47 -39
View File
@@ -63,50 +63,58 @@ export default function Me() {
fullCleanPageContent = <CreateConversation />;
}
if (fullCleanPageContent) {
return (
<div className="flex flex-col px-20">
<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"
>
<FaArrowLeft />
<span>back</span>
</button>
<span className="flex flex-row items-center text-xs text-slate-300">
ESC
</span>
</span>
</div>
{fullCleanPageContent}
</div>
);
}
return (
<div className="flex-1 flex flex-row items-stretch">
<Sidebar />
<SwitchTransition>
<CSSTransition
appear={true}
key={Math.random()}
timeout={400}
classNames="slide"
>
<div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
{getCurrentContent()}
</div>
</CSSTransition>
</SwitchTransition>
</div>
);
}
Me.getLayout = function (content: ReactElement) {
return (
<div className="flex flex-col">
<KeyboardShortcutHandler />
<Header />
{fullCleanPageContent ? (
<div className="flex flex-col px-20">
<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"
>
<FaArrowLeft />
<span>back</span>
</button>
<span className="flex flex-row items-center text-xs text-slate-300">
ESC
</span>
</span>
</div>
{fullCleanPageContent}
</div>
) : (
<div className="flex-1 flex flex-row items-stretch">
<Sidebar />
<SwitchTransition>
<CSSTransition
appear={true}
key={"main_tabs_content"}
timeout={400}
classNames="slide"
>
<div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
{getCurrentContent()}
</div>
</CSSTransition>
</SwitchTransition>
</div>
)}
{content}
</div>
);
}
};