cleaning, prolly broke a lot but whatever
This commit is contained in:
Arjun Patel
@@ -0,0 +1,338 @@
|
||||
import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
|
||||
import { Divider, Avatar, Tooltip, Badge } from "antd";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
FaPlus,
|
||||
FaStream,
|
||||
FaRocket,
|
||||
FaRegClock,
|
||||
FaCheck,
|
||||
FaImages,
|
||||
FaDotCircle,
|
||||
FaUser,
|
||||
FaMicrophone,
|
||||
FaPlay,
|
||||
FaCircle,
|
||||
} from "react-icons/fa";
|
||||
import { HiSpeakerphone } from "react-icons/hi";
|
||||
|
||||
function Sidebar() {
|
||||
const router = useRouter();
|
||||
const currPage = router.query.page;
|
||||
|
||||
const handleRoute = (queryRoute: QueryRoutes) => {
|
||||
router.push({
|
||||
pathname: Routes.home,
|
||||
query: { page: queryRoute },
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-start items-baseline w-[20rem]">
|
||||
{/* new button */}
|
||||
<button
|
||||
onClick={() => handleRoute(QueryRoutes.createConvo)}
|
||||
className="rounded-full flex flex-row items-center px-5 py-2 ml-8 shadow-lg bg-white space-x-2"
|
||||
>
|
||||
<FaPlus className="text-teal-600 text-lg" />
|
||||
<span className="text-slate-500 font-semibold">New</span>
|
||||
</button>
|
||||
|
||||
{/* navigation items */}
|
||||
<div className="flex flex-col my-5 space-y-5 w-full">
|
||||
<span
|
||||
onClick={() => handleRoute(QueryRoutes.convos)}
|
||||
className="flex flex-row items-center hover:cursor-pointer transition-all group"
|
||||
>
|
||||
<span
|
||||
className={`w-5 h-5 -translate-x-4 rounded bg-teal-600 ${
|
||||
currPage == QueryRoutes.convos ? "visible" : "invisible"
|
||||
}`}
|
||||
></span>
|
||||
<FaStream
|
||||
className={`ml-8 mr-2 text-lg ${
|
||||
currPage == QueryRoutes.convos
|
||||
? "text-teal-600"
|
||||
: "text-slate-400"
|
||||
} group-hover:text-slate-600`}
|
||||
/>
|
||||
|
||||
<span className="text-md text-slate-500 font-semibold group-hover:text-slate-600">
|
||||
Conversations
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center ml-2">
|
||||
<FaDotCircle className="text-orange-500 text-md animate-pulse" />
|
||||
|
||||
<span
|
||||
className="text-xs tracking-widest font-semibold
|
||||
text-slate-300 uppercase ml-1"
|
||||
>
|
||||
Live
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 text-md ml-auto">4</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
onClick={() => handleRoute(QueryRoutes.later)}
|
||||
className="flex flex-row items-center hover:cursor-pointer transition-all group"
|
||||
>
|
||||
<span
|
||||
className={`w-5 h-5 -translate-x-4 rounded bg-purple-500 ${
|
||||
currPage == QueryRoutes.later ? "visible" : "invisible"
|
||||
}`}
|
||||
></span>
|
||||
<FaRegClock
|
||||
className={`ml-8 mr-2 text-lg ${
|
||||
currPage == QueryRoutes.later
|
||||
? "text-purple-500"
|
||||
: "text-slate-400"
|
||||
} group-hover:text-slate-600`}
|
||||
/>
|
||||
|
||||
<span className="text-md text-slate-400 font-semibold group-hover:text-slate-600">
|
||||
Later
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 text-md ml-auto">1</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
onClick={() => handleRoute(QueryRoutes.done)}
|
||||
className="flex flex-row items-center hover:cursor-pointer transition-all group"
|
||||
>
|
||||
<span
|
||||
className={`w-5 h-5 -translate-x-4 rounded bg-emerald-500 ${
|
||||
currPage == QueryRoutes.done ? "visible" : "invisible"
|
||||
}`}
|
||||
></span>
|
||||
<FaCheck
|
||||
className={`ml-8 mr-2 text-lg ${
|
||||
currPage == QueryRoutes.done
|
||||
? "text-emerald-500"
|
||||
: "text-slate-400"
|
||||
} group-hover:text-slate-600`}
|
||||
/>
|
||||
|
||||
<span className="text-md text-slate-400 font-semibold group-hover:text-slate-600">
|
||||
Done
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span
|
||||
onClick={() => handleRoute(QueryRoutes.drawer)}
|
||||
className="flex flex-row items-center hover:cursor-pointer transition-all group"
|
||||
>
|
||||
<span
|
||||
className={`w-5 h-5 -translate-x-4 rounded bg-yellow-500 ${
|
||||
currPage == QueryRoutes.drawer ? "visible" : "invisible"
|
||||
}`}
|
||||
></span>
|
||||
<FaImages
|
||||
className={`ml-8 mr-2 text-lg ${
|
||||
currPage == QueryRoutes.drawer
|
||||
? "text-yellow-500"
|
||||
: "text-slate-400"
|
||||
} group-hover:text-slate-600`}
|
||||
/>
|
||||
|
||||
<span className="text-md text-slate-400 font-semibold group-hover:text-slate-600">
|
||||
Drawer
|
||||
</span>
|
||||
|
||||
<span className="ml-2 text-emerald-700 bg-emerald-200 bg-opacity-20 p-1 rounded-md text-xs font-semibold flex items-center flex-row space-x-1">
|
||||
<HiSpeakerphone />
|
||||
<span>new</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
</div>
|
||||
|
||||
{/* pinned items */}
|
||||
<div className="flex flex-col items-start px-5 ml-8 py-5 space-y-2 w-full">
|
||||
{/* section title */}
|
||||
<span className="flex flex-row items-center w-full">
|
||||
<FaRocket className="text-sky-500 text-lg mr-1" />
|
||||
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Priority
|
||||
</span>
|
||||
|
||||
<FaPlus className="text-slate-400 text-lg shrink-0 ml-auto" />
|
||||
</span>
|
||||
|
||||
{/* list of pinned convos */}
|
||||
<span className="flex flex-row items-center bg-slate-50 rounded-lg shadow-lg p-2 w-full">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="text-slate-500 font-semibold">Josh</span>
|
||||
|
||||
<span className="text-slate-300 text-xs">engineer</span>
|
||||
</span>
|
||||
|
||||
<Tooltip title={"Press and hold R to send a voice clip."}>
|
||||
<span
|
||||
className="ml-auto shadow-lg flex flex-row items-center h-10 w-10
|
||||
justify-center rounded-lg text-orange-700 bg-slate-100 text-lg font-bold hover:cursor-pointer"
|
||||
>
|
||||
<FaMicrophone />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<span
|
||||
className="ml-2 shadow-lg flex flex-row items-center h-10 w-10 justify-center
|
||||
rounded-lg text-teal-600 bg-slate-100 text-lg font-bold"
|
||||
>
|
||||
<FaPlay />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="group flex flex-row items-center rounded-lg p-2 w-full hover:cursor-pointer">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
>
|
||||
<Avatar src="https://yt3.ggpht.com/ytc/AKedOLQDVVudyMlzgNrCzOfNkUKn0KGGwfHQ-PjU02p6PQ=s48-c-k-c0x00ffffff-no-rj" />
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="text-slate-400">Mark</span>
|
||||
|
||||
<span className="text-slate-300 text-xs">architect</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="ml-auto shadow-lg flex flex-row items-center h-10 w-10
|
||||
justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="group flex flex-row items-center rounded-lg p-2 w-full hover:cursor-pointer">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
>
|
||||
<Badge dot color={"green"}>
|
||||
<Avatar shape="circle" src="https://picsum.photos/200/100" />
|
||||
</Badge>
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="flex flex-row space-x-2 items-center">
|
||||
<span className="text-slate-500 font-semibold">Sydney</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 text-xs">designer</span>
|
||||
</span>
|
||||
|
||||
<FaCircle className="ml-auto text-orange-500 mr-2 animate-pulse text-[0.7em]" />
|
||||
|
||||
<span
|
||||
className="ml-2 shadow-lg flex flex-row items-center h-10 w-10
|
||||
justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="group flex flex-row items-center rounded-lg p-2 w-full hover:cursor-pointer">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
>
|
||||
<Badge dot color={"green"}>
|
||||
<Avatar shape="circle" src="https://picsum.photos/202/600" />
|
||||
</Badge>
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="text-slate-400">Jessica</span>
|
||||
|
||||
<span className="text-slate-300 text-xs">recruiter</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="ml-auto shadow-lg flex flex-row items-center h-10 w-10
|
||||
justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="group flex flex-row items-center rounded-lg p-2 w-full hover:cursor-pointer">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
>
|
||||
<Avatar shape="circle" src="https://picsum.photos/200/300" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/300" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/300" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/300" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/300" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/300" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/300" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/300" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/300" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/300" />
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="text-slate-400">General</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="ml-auto shadow-lg flex flex-row items-center h-10 w-10
|
||||
justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="group flex flex-row items-center rounded-lg p-2 w-full hover:cursor-pointer">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/random" />
|
||||
<Avatar style={{ backgroundColor: "#f56a00" }}>K</Avatar>
|
||||
<Avatar style={{ backgroundColor: "#87d068" }} icon={<FaUser />} />
|
||||
<Avatar style={{ backgroundColor: "#1890ff" }} icon={<FaUser />} />
|
||||
<Avatar style={{ backgroundColor: "#1890ff" }} icon={<FaUser />} />
|
||||
<Avatar style={{ backgroundColor: "#1890ff" }} icon={<FaUser />} />
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="text-slate-400">Engineering</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="ml-auto shadow-lg flex flex-row items-center h-10 w-10
|
||||
justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar;
|
||||
Reference in New Issue
Block a user