diff --git a/packages/common/helpers/routes.ts b/packages/common/helpers/routes.ts new file mode 100644 index 0000000..baedc97 --- /dev/null +++ b/packages/common/helpers/routes.ts @@ -0,0 +1,10 @@ +enum Routes { + convos = "/s", + priority = "/s/priority", + later = "/s/later", + done = "/s/done", + drawer = "/s/drawer", + rooms = "/s/rooms", +} + +export default Routes; diff --git a/packages/web/components/Layouts/DynamicMeLayout.tsx b/packages/web/components/Layouts/DynamicMeLayout.tsx new file mode 100644 index 0000000..a87aa51 --- /dev/null +++ b/packages/web/components/Layouts/DynamicMeLayout.tsx @@ -0,0 +1,21 @@ +import Header from "../v2/Header"; +import Sidebar from "../v2/Sidebar"; +import React from "react"; + +export default function getDynamicMeLayout(page: React.ReactElement) { + console.log("rendering layout"); + + return ( +
+
+ +
+ + +
+ {page} +
+
+
+ ); +} diff --git a/packages/web/components/Layouts/SiteLayout.js b/packages/web/components/Layouts/SiteLayout.js index 9894ed3..b2b3518 100644 --- a/packages/web/components/Layouts/SiteLayout.js +++ b/packages/web/components/Layouts/SiteLayout.js @@ -1,5 +1,4 @@ - -import Head from "next/head" +import Head from "next/head"; export default function SiteLayout({ children }) { return ( @@ -24,12 +23,13 @@ export default function SiteLayout({ children }) { href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap" rel="stylesheet" /> - + -
- {children} -
+
{children}
- ) -} \ No newline at end of file + ); +} diff --git a/packages/web/components/v2/Header.tsx b/packages/web/components/v2/Header.tsx new file mode 100644 index 0000000..6b43373 --- /dev/null +++ b/packages/web/components/v2/Header.tsx @@ -0,0 +1,100 @@ +import { Menu, Dropdown, Avatar } from "antd"; +import { useRouter } from "next/router"; +import { useRef } from "react"; +import { KeyMap, GlobalHotKeys } from "react-hotkeys"; +import { + FaUser, + FaLayerGroup, + FaSearch, + FaHeadphones, + FaMicrophoneAlt, +} from "react-icons/fa"; +import { UserStatus } from "../../models/user"; +import MainLogo from "../MainLogo"; +import UserStatusBubble from "../UserStatusBubble"; + +export default function Header() { + const router = useRouter(); + + const UserMenu = ( + + router.push("/teams/profile")} + icon={} + > + + + + window.open("/teams", "_self")} + key={"team hub"} + icon={} + > + + + + + + console.log("sign out")}> + + + + ); + + const inputRef = useRef(); + const selectSearch = () => { + inputRef.current.focus(); + }; + + const keyMap: KeyMap = { + SELECT_SEARCH: { + name: "select search to start searching", + sequence: "/", + action: "keyup", + }, + }; + const handlers = { + SELECT_SEARCH: selectSearch, + }; + + return ( +
+ + + + + {/* search bar */} +
+ + +
+ + {/* controls */} +
+ + +
+ + {/* profile section */} + + + + + + + +
+ ); +} diff --git a/packages/web/components/v2/Sidebar.tsx b/packages/web/components/v2/Sidebar.tsx new file mode 100644 index 0000000..184aefa --- /dev/null +++ b/packages/web/components/v2/Sidebar.tsx @@ -0,0 +1,446 @@ +import { Divider, Avatar, Tooltip, Badge } from "antd"; +import { useRouter } from "next/router"; +import { + FaPlus, + FaStream, + FaRocket, + FaRegClock, + FaCheck, + FaImages, + FaGripHorizontal, + FaDotCircle, + FaUser, + FaPhoneSlash, + FaWalking, + FaGithub, + FaAtlassian, + FaCode, + FaGlobe, + FaGoogleDrive, + FaMicrophone, + FaPlay, + FaCircle, +} from "react-icons/fa"; +import { HiSpeakerphone } from "react-icons/hi"; +import Routes from "@nirvana/common/helpers/routes"; + +function Sidebar() { + const router = useRouter(); + const currPage = router.pathname; + console.log(currPage); + + const handleRoute = (route: Routes) => { + router.push(route); + }; + + return ( +
+ {/* new button */} + + + {/* navigation items */} +
+ handleRoute(Routes.convos)} + className="flex flex-row items-center hover:cursor-pointer transition-all group" + > + + + + + Todo + + + 4 + + + handleRoute(Routes.priority)} + className="flex flex-row items-center hover:cursor-pointer transition-all group" + > + + + + + Priority + + + + + new + + + 3 + + + handleRoute(Routes.later)} + className="flex flex-row items-center hover:cursor-pointer transition-all group" + > + + + + + Later + + + 1 + + + handleRoute(Routes.done)} + className="flex flex-row items-center hover:cursor-pointer transition-all group" + > + + + + + Done + + + + + + handleRoute(Routes.drawer)} + className="flex flex-row items-center hover:cursor-pointer transition-all group" + > + + + + + Drawer + + + + + new + + + + handleRoute(Routes.rooms)} + className="flex flex-row items-center hover:cursor-pointer transition-all group" + > + + + + + Rooms + + + + + new + + +
+ + {/* Live Rooms */} +
+ {/* section title */} + + + + + Live + + + + {/* list of current rooms */} + + + + K + } /> + } /> + + + Cafeteria + + + + + + + + + + Chillin and Coding + + + + + +
+ + {/* pinned items */} +
+ {/* section title */} + + + + + Priority + + + + + + {/* pinned drawer items */} + + + + + + + + + + + + + + + + + + + + + + + + + {/* list of pinned convos */} + + + + + + + Josh + + engineer + + + + + + + + + + + + + + + + + + + Mark + + architect + + + + 2 + + + + + + + + + + + + + Sydney + + + designer + + + + + + 3 + + + + + + + + + + + + Jessica + + recruiter + + + + 4 + + + + + + + + + + + + + + + + + + + General + + + + 5 + + + + + + + K + } /> + } /> + } /> + } /> + + + + Engineering + + + + 5 + + +
+
+ ); +} + +export default Sidebar; diff --git a/packages/web/pages/_app.js b/packages/web/pages/_app.js deleted file mode 100644 index 473aac3..0000000 --- a/packages/web/pages/_app.js +++ /dev/null @@ -1,23 +0,0 @@ -import "../styles/globals.css"; -import "antd/dist/antd.css"; -import Head from "next/head"; -import { AuthProvider } from "../contexts/authContext"; -import SiteLayout from "../components/Layouts/SiteLayout"; -import { Toaster } from "react-hot-toast"; - -import { connection }from '@nirvana/common' -connection() - -function MyApp({ Component, pageProps }) { - return ( - - - - - - - - ); -} - -export default MyApp; diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx new file mode 100644 index 0000000..77e154c --- /dev/null +++ b/packages/web/pages/_app.tsx @@ -0,0 +1,35 @@ +import "../styles/globals.css"; +import "antd/dist/antd.css"; +import { AuthProvider } from "../contexts/authContext"; +import SiteLayout from "../components/Layouts/SiteLayout"; +import { Toaster } from "react-hot-toast"; + +import type { NextPage } from "next"; +import type { AppProps } from "next/app"; + +import { connection } from "@nirvana/common"; +import React, { ReactElement, ReactNode } from "react"; +connection(); + +type NextPageWithLayout = NextPage & { + getLayout?: (page: ReactElement) => ReactNode; +}; + +type AppPropsWithLayout = AppProps & { + Component: NextPageWithLayout; +}; + +function MyApp({ Component, pageProps }: AppPropsWithLayout) { + // any custom layout for app persistence + const getLayout = Component.getLayout ?? ((page) => page); + + return ( + + {getLayout()} + + + + ); +} + +export default MyApp; diff --git a/packages/web/pages/me.tsx b/packages/web/pages/me.tsx deleted file mode 100644 index 12f342f..0000000 --- a/packages/web/pages/me.tsx +++ /dev/null @@ -1,786 +0,0 @@ -import { - Avatar, - Badge, - Collapse, - Divider, - Dropdown, - Menu, - Tooltip, -} from "antd"; -import { useRouter } from "next/router"; -import { useRef } from "react"; -import { GlobalHotKeys, KeyMap } from "react-hotkeys"; -import { - FaAngleDown, - FaAngleRight, - FaAtlassian, - FaCheck, - FaCheckDouble, - FaCircle, - FaCode, - FaDotCircle, - FaGithub, - FaGlobe, - FaGoogleDrive, - FaGripHorizontal, - FaHeadphones, - FaImage, - FaImages, - FaLayerGroup, - FaMicrophone, - FaMicrophoneAlt, - FaPhoneSlash, - FaPlay, - FaPlus, - FaRegArrowAltCircleDown, - FaRegClock, - FaRocket, - FaSearch, - FaStream, - FaThumbtack, - FaUser, - FaWalking, -} from "react-icons/fa"; -import { HiSpeakerphone } from "react-icons/hi"; -import MainLogo from "../components/MainLogo"; -import UserStatusBubble from "../components/UserStatusBubble"; -import { UserStatus } from "../models/user"; - -const { Panel } = Collapse; - -export default function Me() { - return ( -
-
- -
- - - -
-
- ); -} - -function Header() { - const router = useRouter(); - - const UserMenu = ( - - router.push("/teams/profile")} - icon={} - > - - - - window.open("/teams", "_self")} - key={"team hub"} - icon={} - > - - - - - - console.log("sign out")}> - - - - ); - - const inputRef = useRef(); - const selectSearch = () => { - inputRef.current.focus(); - }; - - const keyMap: KeyMap = { - SELECT_SEARCH: { - name: "select search to start searching", - sequence: "/", - action: "keyup", - }, - }; - const handlers = { - SELECT_SEARCH: selectSearch, - }; - - return ( -
- - - - - {/* search bar */} -
- - -
- - {/* controls */} -
- - -
- - {/* profile section */} - - - - - - - -
- ); -} - -function Sidebar() { - return ( -
- {/* new button */} - - - {/* navigation items */} -
- - - - - Todo - - 4 - - - - - - Priority - - - - new - - - 3 - - - - - - Later - - 1 - - - - - - Done - - - - - - - - Drawer - - - - new - - - - - - - Rooms - - - - new - - -
- - {/* Live Rooms */} -
- {/* section title */} - - - - - Live - - - - {/* list of current rooms */} - - - - K - } /> - } /> - - - Cafeteria - - - - - - - - - - Chillin and Coding - - - - - -
- - {/* pinned items */} -
- {/* section title */} - - - - - Pinned - - - - - - {/* pinned drawer items */} - - - - - - - - - - - - - - - - - - - - - - - - - {/* list of pinned convos */} - - - - - - - Josh - - engineer - - - - - - - - - - - - - - - - - - - Mark - - architect - - - - 2 - - - - - - - - - - - - - Sydney - - - designer - - - - - - 3 - - - - - - - - - - - - Jessica - - recruiter - - - - 4 - - - - - - - - - - - - - - - - - - - General - - - - 5 - - - - - - - K - } /> - } /> - } /> - } /> - - - - Engineering - - - - 5 - - -
-
- ); -} - -function Convos() { - return ( -
- {/* Today */} - - - Today - - - - - - - {/* engineering */} - - - - - - - K - } - /> - } - /> - } - /> - } - /> - - - Engineering - - - - {`Josh: "let's just figure out how to finish the rest of the "`} - - - - 9:00am - - - {/* actions */} - - - - - - - - - - - - - - - - - {/* general */} - - - - - - - - - - - - - - - - - - General - - - - You spoke 2 hours ago - - - - 7:22am - - - {/* actions */} - - - - - - - - - - - - - - - - - {/* one on one chat with sydney */} - - - - - - - - - - - Sydney - - - - {`"Did you ever figure out that problem with the "`} - - - - 6:50am - - - {/* actions */} - - - - - - - - - - - - - - - - - - - - Last 7 Days - - - - - - - - - - - - - - - - - Justin - - - - {`"Here's a quick github link for that library you were looking for"`} - - - - - - - - - - - - - - 6:50am - - - {/* actions */} - - - - - - - - - - - - - - - - - - - - - - - - - - Steph and Lee - - - - {`"Let's hop into a room to discuss this sometime this afternoon..."`} - - - - 6:50am - - - {/* actions */} - - - - - - - - - - - - - - - - - - - - Earlier This Month - - - - - - - - November 2021 - - - - - - {"That's all"} -
- ); -} diff --git a/packages/web/pages/s/done.tsx b/packages/web/pages/s/done.tsx new file mode 100644 index 0000000..57e4f44 --- /dev/null +++ b/packages/web/pages/s/done.tsx @@ -0,0 +1,10 @@ +import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout"; +import React from "react"; + +export default function Done() { + return
All caught up.
; +} + +Done.getLayout = function getLayout(page: React.ReactElement) { + return getDynamicMeLayout(page); +}; diff --git a/packages/web/pages/s/drawer.tsx b/packages/web/pages/s/drawer.tsx new file mode 100644 index 0000000..e69de29 diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx new file mode 100644 index 0000000..0fd33e9 --- /dev/null +++ b/packages/web/pages/s/index.tsx @@ -0,0 +1,333 @@ +import { Avatar, Badge } from "antd"; +import { + FaAngleRight, + FaAtlassian, + FaCheck, + FaCheckDouble, + FaCircle, + FaGithub, + FaRegClock, + FaRocket, + FaUser, +} from "react-icons/fa"; +import React from "react"; +import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout"; + +function Me() { + return ; +} + +Me.getLayout = function getLayout(page: React.ReactElement) { + return getDynamicMeLayout(page); +}; + +export default Me; + +function Convos() { + return ( + <> + {/* Today */} + + + Today + + + + + + + {/* engineering */} + + + + + + + K + } + /> + } + /> + } + /> + } + /> + + + Engineering + + + + {`Josh: "let's just figure out how to finish the rest of the "`} + + + + 9:00am + + + {/* actions */} + + + + + + + + + + + + + + + + + {/* general */} + + + + + + + + + + + + + + + + + + General + + + + You spoke 2 hours ago + + + + 7:22am + + + {/* actions */} + + + + + + + + + + + + + + + + + {/* one on one chat with sydney */} + + + + + + + + + + + Sydney + + + + {`"Did you ever figure out that problem with the "`} + + + + 6:50am + + + {/* actions */} + + + + + + + + + + + + + + + + + + + + Last 7 Days + + + + + + + + + + + + + + + + + Justin + + + + {`"Here's a quick github link for that library you were looking for"`} + + + + + + + + + + + + + + 6:50am + + + {/* actions */} + + + + + + + + + + + + + + + + + + + + + + + + + + Steph and Lee + + + + {`"Let's hop into a room to discuss this sometime this afternoon..."`} + + + + 6:50am + + + {/* actions */} + + + + + + + + + + + + + + + + + + + + Earlier This Month + + + + + + + + November 2021 + + + + + + {"That's all"} + + ); +} diff --git a/packages/web/pages/s/later.tsx b/packages/web/pages/s/later.tsx new file mode 100644 index 0000000..c4229ed --- /dev/null +++ b/packages/web/pages/s/later.tsx @@ -0,0 +1,10 @@ +import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout"; +import React from "react"; + +export default function Later() { + return
All caught up.
; +} + +Later.getLayout = function getLayout(page: React.ReactElement) { + return getDynamicMeLayout(page); +}; diff --git a/packages/web/pages/s/priority.tsx b/packages/web/pages/s/priority.tsx new file mode 100644 index 0000000..12811e9 --- /dev/null +++ b/packages/web/pages/s/priority.tsx @@ -0,0 +1,10 @@ +import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout"; +import React from "react"; + +export default function Priority() { + return
All caught up.
; +} + +Priority.getLayout = function getLayout(page: React.ReactElement) { + return getDynamicMeLayout(page); +}; diff --git a/packages/web/pages/s/rooms.tsx b/packages/web/pages/s/rooms.tsx new file mode 100644 index 0000000..e69de29