hash method of navigation and works well...i think I avoid re-rendering?
This commit is contained in:
talksik
@@ -1,9 +1,9 @@
|
||||
enum Routes {
|
||||
convos = "/s",
|
||||
later = "/s/later",
|
||||
done = "/s/done",
|
||||
drawer = "/s/drawer",
|
||||
rooms = "/s/rooms",
|
||||
convos = "/s#conversations",
|
||||
later = "/s#later",
|
||||
done = "/s#done",
|
||||
drawer = "/s#drawer",
|
||||
rooms = "/s#rooms",
|
||||
}
|
||||
|
||||
export default Routes;
|
||||
|
||||
@@ -0,0 +1,371 @@
|
||||
import { Avatar, Badge } from "antd";
|
||||
import {
|
||||
FaDotCircle,
|
||||
FaWalking,
|
||||
FaRocket,
|
||||
FaCheckDouble,
|
||||
FaCircle,
|
||||
FaUser,
|
||||
FaRegClock,
|
||||
FaCheck,
|
||||
FaAngleRight,
|
||||
FaGithub,
|
||||
FaAtlassian,
|
||||
} from "react-icons/fa";
|
||||
|
||||
export default function Conversations() {
|
||||
return (
|
||||
<>
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full">
|
||||
<FaDotCircle className="text-orange-500 text-lg mr-1" />
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Live
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* row of live room cards */}
|
||||
<span className="flex flex-row flex-wrap">
|
||||
{/* engineering rooms */}
|
||||
<span className="group relative flex flex-row items-center bg-slate-50 rounded-lg border p-5">
|
||||
<Avatar.Group
|
||||
maxCount={3}
|
||||
size={{ xs: 1000 }}
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
>
|
||||
<Avatar
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
style={{ backgroundColor: "cyan" }}
|
||||
/>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/100" />
|
||||
<Avatar src="https://joeschmoe.io/api/v1/2" />
|
||||
<Avatar src="https://joeschmoe.io/api/v1/10" />
|
||||
<Avatar src="https://joeschmoe.io/api/v1/8" />
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="text-md font-semibold ml-2 mr-10">Engineering</span>
|
||||
|
||||
<span className="text-xs text-slate-300 group-hover:invisible">
|
||||
{"01:20"}
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200
|
||||
absolute right-5 text-slate-50 group-hover:text-teal-600 text-lg transition-all -z-10 group-hover:z-10"
|
||||
>
|
||||
<FaWalking className="text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
|
||||
<FaRocket className="text-sky-500 text-lg mr-1" />
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Priority
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* Today */}
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full">
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Today
|
||||
</span>
|
||||
|
||||
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col w-full items-stretch">
|
||||
{/* engineering */}
|
||||
<span
|
||||
className="py-2 px-4 border-t border-t-slate-200 flex flex-row hover:bg-slate-50 transition-all
|
||||
items-center"
|
||||
>
|
||||
<FaCircle className="text-orange-500 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={1}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<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="text-slate-500 ml-2">Engineering</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[20rem] truncate text-sm">
|
||||
{`Josh: "let's just figure out how to finish the rest of the "`}
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
9:00am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* general */}
|
||||
<span
|
||||
className="group relative border-t border-t-slate-200 hover:bg-slate-50
|
||||
transition-all py-2 px-4 flex flex-row items-center"
|
||||
>
|
||||
<FaCircle className="text-slate-100 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={1}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<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="text-slate-600 ml-2">General</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[10rem] truncate text-sm">
|
||||
You spoke 2 hours ago
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
7:22am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* one on one chat with sydney */}
|
||||
<span
|
||||
className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
|
||||
relative px-4 flex flex-row items-center"
|
||||
>
|
||||
<FaCircle className="text-orange-500 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<Badge dot color={"green"}>
|
||||
<Avatar shape="circle" src="https://picsum.photos/200/100" />
|
||||
</Badge>
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="text-slate-600 ml-2">Sydney</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[20rem] truncate text-sm">
|
||||
{`"Did you ever figure out that problem with the "`}
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
6:50am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Last 7 Days
|
||||
</span>
|
||||
|
||||
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col w-full items-stretch">
|
||||
<span
|
||||
className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
|
||||
relative px-4 flex flex-row items-center first:rounded-t-lg last:rounded-b-lg"
|
||||
>
|
||||
<FaCircle className="text-orange-500 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<Badge dot color={"green"}>
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/100" />
|
||||
</Badge>
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="text-slate-600 ml-2">Justin</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[20rem] truncate text-sm">
|
||||
{`"Here's a quick github link for that library you were looking for"`}
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center space-x-2 mx-auto">
|
||||
<span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer">
|
||||
<FaGithub className="text-slate-400 text-xl shrink-0" />
|
||||
</span>
|
||||
|
||||
<span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer">
|
||||
<FaAtlassian className="text-sky-400 text-xl shrink-0" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
6:50am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
|
||||
relative px-4 flex flex-row items-center first:rounded-t-lg last:rounded-b-lg"
|
||||
>
|
||||
<FaCircle className="text-orange-500 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<Avatar shape="circle" src="https://picsum.photos/190/100" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/192/100" />
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="text-slate-600 ml-2">Steph and Lee</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[20rem] truncate text-sm">
|
||||
{`"Let's hop into a room to discuss this sometime this afternoon..."`}
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
6:50am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Earlier This Month
|
||||
</span>
|
||||
|
||||
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
November 2021
|
||||
</span>
|
||||
|
||||
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
|
||||
</span>
|
||||
|
||||
<span className="mx-auto text-slate-300">{"That's all"}</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
|
||||
import React from "react";
|
||||
import { FaCheck } from "react-icons/fa";
|
||||
|
||||
@@ -18,7 +17,3 @@ export default function Done() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Done.getLayout = function getLayout(page: React.ReactElement) {
|
||||
return getDynamicMeLayout(page);
|
||||
};
|
||||
@@ -1,4 +1,3 @@
|
||||
import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
|
||||
import React from "react";
|
||||
import { FaLink } from "react-icons/fa";
|
||||
|
||||
@@ -18,7 +17,3 @@ export default function Drawer() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Drawer.getLayout = function getLayout(page: React.ReactElement) {
|
||||
return getDynamicMeLayout(page);
|
||||
};
|
||||
@@ -17,9 +17,6 @@ import UserStatusBubble from "../UserStatusBubble";
|
||||
export default function Header() {
|
||||
const router = useRouter();
|
||||
|
||||
const currPage = router.pathname;
|
||||
console.log(currPage);
|
||||
|
||||
const UserMenu = (
|
||||
<Menu title="user menu">
|
||||
<Menu.Item
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
|
||||
import React from "react";
|
||||
import { FaRegClock } from "react-icons/fa";
|
||||
|
||||
export default function Later() {
|
||||
console.log("re-rendering later");
|
||||
return (
|
||||
<div className="mx-auto my-auto flex flex-col">
|
||||
<img
|
||||
@@ -19,7 +19,3 @@ export default function Later() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Later.getLayout = function getLayout(page: React.ReactElement) {
|
||||
return getDynamicMeLayout(page);
|
||||
};
|
||||
@@ -1,4 +1,3 @@
|
||||
import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
|
||||
import React from "react";
|
||||
import { FaRocket } from "react-icons/fa";
|
||||
|
||||
@@ -19,7 +18,3 @@ export default function Priority() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Priority.getLayout = function getLayout(page: React.ReactElement) {
|
||||
return getDynamicMeLayout(page);
|
||||
};
|
||||
@@ -7,7 +7,6 @@ import {
|
||||
FaRegClock,
|
||||
FaCheck,
|
||||
FaImages,
|
||||
FaGripHorizontal,
|
||||
FaDotCircle,
|
||||
FaUser,
|
||||
FaMicrophone,
|
||||
@@ -16,11 +15,11 @@ import {
|
||||
} from "react-icons/fa";
|
||||
import { HiSpeakerphone } from "react-icons/hi";
|
||||
import Routes from "@nirvana/common/helpers/routes";
|
||||
import Link from "next/link";
|
||||
|
||||
function Sidebar() {
|
||||
const router = useRouter();
|
||||
const currPage = router.pathname;
|
||||
console.log(currPage);
|
||||
|
||||
const handleRoute = (route: Routes) => {
|
||||
router.push(route);
|
||||
@@ -36,6 +35,11 @@ function Sidebar() {
|
||||
|
||||
{/* navigation items */}
|
||||
<div className="flex flex-col my-5 space-y-5 w-full">
|
||||
<Link href={Routes.convos}>{Routes.convos}</Link>
|
||||
<Link href={Routes.later}>{Routes.later}</Link>
|
||||
<Link href={Routes.done}>{Routes.done}</Link>
|
||||
<Link href={Routes.drawer}>{Routes.drawer}</Link>
|
||||
|
||||
<span
|
||||
onClick={() => handleRoute(Routes.convos)}
|
||||
className="flex flex-row items-center hover:cursor-pointer transition-all group"
|
||||
|
||||
+48
-369
@@ -1,378 +1,57 @@
|
||||
import { Avatar, Badge } from "antd";
|
||||
import {
|
||||
FaAngleRight,
|
||||
FaAtlassian,
|
||||
FaCheck,
|
||||
FaCheckDouble,
|
||||
FaCircle,
|
||||
FaDotCircle,
|
||||
FaGithub,
|
||||
FaRegClock,
|
||||
FaRocket,
|
||||
FaUser,
|
||||
FaWalking,
|
||||
} from "react-icons/fa";
|
||||
import React from "react";
|
||||
import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
|
||||
import Routes from "@nirvana/common/helpers/routes";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Conversations from "../../components/v2/Conversations";
|
||||
import Done from "../../components/v2/done";
|
||||
import Drawer from "../../components/v2/drawer";
|
||||
import Header from "../../components/v2/Header";
|
||||
import Later from "../../components/v2/later";
|
||||
import Sidebar from "../../components/v2/Sidebar";
|
||||
|
||||
function Me() {
|
||||
return <Convos />;
|
||||
}
|
||||
export default function Me() {
|
||||
// figure out what content to render from here
|
||||
const router = useRouter();
|
||||
const [currRoute, setCurrRoute] = useState<string>(router.pathname);
|
||||
|
||||
Me.getLayout = function getLayout(page: React.ReactElement) {
|
||||
return getDynamicMeLayout(page);
|
||||
};
|
||||
useEffect(() => {
|
||||
const onHashChangeStart = (url) => {
|
||||
console.log(`Path changing to ${url}`);
|
||||
setCurrRoute(url);
|
||||
};
|
||||
|
||||
export default Me;
|
||||
router.events.on("hashChangeStart", onHashChangeStart);
|
||||
|
||||
return () => {
|
||||
router.events.off("hashChangeStart", onHashChangeStart);
|
||||
};
|
||||
}, [router.events]);
|
||||
|
||||
function getCurrentContent() {
|
||||
switch (currRoute) {
|
||||
case Routes.convos:
|
||||
return <Conversations />;
|
||||
case Routes.later:
|
||||
return <Later />;
|
||||
case Routes.done:
|
||||
return <Done />;
|
||||
case Routes.drawer:
|
||||
return <Drawer />;
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
|
||||
function Convos() {
|
||||
return (
|
||||
<>
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full">
|
||||
<FaDotCircle className="text-orange-500 text-lg mr-1" />
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Live
|
||||
</span>
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<Header />
|
||||
|
||||
{/* row of live room cards */}
|
||||
<span className="flex flex-row flex-wrap">
|
||||
{/* engineering rooms */}
|
||||
<span className="group relative flex flex-row items-center bg-slate-50 rounded-lg border p-5">
|
||||
<Avatar.Group
|
||||
maxCount={3}
|
||||
size={{ xs: 1000 }}
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
>
|
||||
<Avatar
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
style={{ backgroundColor: "cyan" }}
|
||||
/>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/100" />
|
||||
<Avatar src="https://joeschmoe.io/api/v1/2" />
|
||||
<Avatar src="https://joeschmoe.io/api/v1/10" />
|
||||
<Avatar src="https://joeschmoe.io/api/v1/8" />
|
||||
</Avatar.Group>
|
||||
<div className="flex-1 flex flex-row items-stretch">
|
||||
<Sidebar />
|
||||
|
||||
<span className="text-md font-semibold ml-2 mr-10">Engineering</span>
|
||||
|
||||
<span className="text-xs text-slate-300 group-hover:invisible">
|
||||
{"01:20"}
|
||||
</span>
|
||||
|
||||
<FaWalking className="absolute right-5 text-slate-50 group-hover:text-teal-600 text-lg transition-all -z-10 group-hover:z-10" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
|
||||
<FaRocket className="text-sky-500 text-lg mr-1" />
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Priority
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* Today */}
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full">
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Today
|
||||
</span>
|
||||
|
||||
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col w-full items-stretch">
|
||||
{/* engineering */}
|
||||
<span
|
||||
className="py-2 px-4 border-t border-t-slate-200 flex flex-row hover:bg-slate-50 transition-all
|
||||
items-center"
|
||||
>
|
||||
<FaCircle className="text-orange-500 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={1}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<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="text-slate-500 ml-2">Engineering</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[20rem] truncate text-sm">
|
||||
{`Josh: "let's just figure out how to finish the rest of the "`}
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
9:00am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* general */}
|
||||
<span
|
||||
className="group relative border-t border-t-slate-200 hover:bg-slate-50
|
||||
transition-all py-2 px-4 flex flex-row items-center"
|
||||
>
|
||||
<FaCircle className="text-slate-100 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={1}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<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="text-slate-600 ml-2">General</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[10rem] truncate text-sm">
|
||||
You spoke 2 hours ago
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
7:22am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* one on one chat with sydney */}
|
||||
<span
|
||||
className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
|
||||
relative px-4 flex flex-row items-center"
|
||||
>
|
||||
<FaCircle className="text-orange-500 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<Badge dot color={"green"}>
|
||||
<Avatar shape="circle" src="https://picsum.photos/200/100" />
|
||||
</Badge>
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="text-slate-600 ml-2">Sydney</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[20rem] truncate text-sm">
|
||||
{`"Did you ever figure out that problem with the "`}
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
6:50am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Last 7 Days
|
||||
</span>
|
||||
|
||||
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col w-full items-stretch">
|
||||
<span
|
||||
className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
|
||||
relative px-4 flex flex-row items-center first:rounded-t-lg last:rounded-b-lg"
|
||||
>
|
||||
<FaCircle className="text-orange-500 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<Badge dot color={"green"}>
|
||||
<Avatar shape="circle" src="https://picsum.photos/240/100" />
|
||||
</Badge>
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="text-slate-600 ml-2">Justin</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[20rem] truncate text-sm">
|
||||
{`"Here's a quick github link for that library you were looking for"`}
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center space-x-2 mx-auto">
|
||||
<span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer">
|
||||
<FaGithub className="text-slate-400 text-xl shrink-0" />
|
||||
</span>
|
||||
|
||||
<span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer">
|
||||
<FaAtlassian className="text-sky-400 text-xl shrink-0" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
6:50am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
|
||||
relative px-4 flex flex-row items-center first:rounded-t-lg last:rounded-b-lg"
|
||||
>
|
||||
<FaCircle className="text-orange-500 mr-2 animate-pulse" />
|
||||
|
||||
<span className="w-[15rem] flex flex-row items-center">
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
|
||||
className="w-[5rem]"
|
||||
>
|
||||
<Avatar shape="circle" src="https://picsum.photos/190/100" />
|
||||
<Avatar shape="circle" src="https://picsum.photos/192/100" />
|
||||
</Avatar.Group>
|
||||
|
||||
<span className="text-slate-600 ml-2">Steph and Lee</span>
|
||||
</span>
|
||||
|
||||
<span className="text-slate-300 w-[20rem] truncate text-sm">
|
||||
{`"Let's hop into a room to discuss this sometime this afternoon..."`}
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-slate-300 text-sm group-hover:invisible">
|
||||
6:50am
|
||||
</span>
|
||||
|
||||
{/* actions */}
|
||||
<span className="ml-auto flex flex-row items-center group-hover:visible invisible absolute right-5">
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRocket className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaRegClock className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaCheck className="ml-auto text-lg" />
|
||||
</span>
|
||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
|
||||
<FaAngleRight className="ml-auto text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
Earlier This Month
|
||||
</span>
|
||||
|
||||
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
|
||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
|
||||
November 2021
|
||||
</span>
|
||||
|
||||
<FaCheckDouble className="text-slate-300 ml-auto text-lg" />
|
||||
</span>
|
||||
|
||||
<span className="mx-auto text-slate-300">{"That's all"}</span>
|
||||
</>
|
||||
<div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
|
||||
{getCurrentContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
|
||||
import React from "react";
|
||||
|
||||
export default function Rooms() {
|
||||
return <div>All caught up.</div>;
|
||||
}
|
||||
|
||||
Rooms.getLayout = function getLayout(page: React.ReactElement) {
|
||||
return getDynamicMeLayout(page);
|
||||
};
|
||||
Reference in New Issue
Block a user