adding eslint and stuff that miht break other things but will test

2022-01-29 16:27:24 -08:00
parent ca68b357b6
commit 1cfc50141a
7 changed files with 177 additions and 7 deletions
@@ -0,0 +1,96 @@
+import { Avatar, Dropdown, Menu } from "antd";
+import { useRouter } from "next/router";
+import { useRef } from "react";
+import { GlobalHotKeys, KeyMap } from "react-hotkeys";
+import { FaLayerGroup, FaSearch, FaUser } from "react-icons/fa";
+import MainLogo from "../components/MainLogo";
+import UserStatusBubble from "../components/UserStatusBubble";
+import { UserStatus } from "../models/user";
+
+export default function Me() {
+  return (
+    <div className="">
+      <Header />
+    </div>
+  );
+}
+
+function Header() {
+  const router = useRouter();
+
+  const UserMenu = (
+    <Menu title="user menu">
+      <Menu.Item
+        key={2}
+        onClick={() => router.push("/teams/profile")}
+        icon={<FaUser />}
+      >
+        <button>Profile</button>
+      </Menu.Item>
+
+      <Menu.Item
+        onClick={() => window.open("/teams", "_self")}
+        key={"team hub"}
+        icon={<FaLayerGroup />}
+      >
+        <button>Team Hub</button>
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item danger key={3} onClick={() => console.log("sign out")}>
+        <button>Sign Out</button>
+      </Menu.Item>
+    </Menu>
+  );
+
+  const inputRef = useRef<HTMLInputElement>();
+  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 (
+    <div className="flex flex-row justify-start items-center py-5 px-10">
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap} />
+
+      <MainLogo className="text-3xl" />
+
+      {/* search bar */}
+      <div className="mx-auto flex flex-row items-center space-x-2">
+        <FaSearch className="text-lg text-slate-300" />
+        <input
+          placeholder="Type / to search"
+          className="bg-transparent placeholder-slate-300"
+          ref={inputRef}
+        />
+      </div>
+
+      {/* controls & profile section */}
+      <Dropdown
+        overlay={UserMenu}
+        trigger={["click"]}
+        className="ml-2 shrink-0"
+      >
+        <span className="relative flex hover:cursor-pointer">
+          <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
+          <UserStatusBubble status={UserStatus.online} />
+          <Avatar
+            src={"https://avatars.githubusercontent.com/u/19339529?s=40&v=4"}
+            size={"large"}
+          />
+        </span>
+      </Dropdown>
+    </div>
+  );
+}