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

shortcuts for sidebar for priority convos

Browse Source
This commit is contained in:
Arjun Patel
2022-02-04 22:50:14 -08:00
parent 91ef53d1a5
commit e22786be50
6 changed files with 182 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/components/MainTabsOrPages/Sidebar.tsx
+2 -163
View File
@@ -15,6 +15,7 @@ import {
FaCircle,
} from "react-icons/fa";
import { HiSpeakerphone } from "react-icons/hi";
import Priority from "./Priority";
function Sidebar() {
const router = useRouter();
@@ -167,169 +168,7 @@ function Sidebar() {
</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>
<Priority />
</div>
</div>
);