feat: improve user profile placeholder in nav

kurtosis-tech · Sep 26, 2024 · 82b91eb · 82b91eb
1 parent 73a835f
commit 82b91eb
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 11 deletions.
diff --git a/kontrol-frontend/src/components/Navbar.tsx b/kontrol-frontend/src/components/Navbar.tsx
@@ -7,9 +7,21 @@ import {
   Image,
   Spacer,
   AvatarBadge,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Button,
 } from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
 
 const Navbar = () => {
+  const navigate = useNavigate();
+
+  const navigateToPlaceholder = () => {
+    navigate("profile");
+  };
+
   return (
     <Box
       bg="white"
@@ -21,7 +33,6 @@ const Navbar = () => {
       borderBottomColor="gray.100"
     >
       <Flex h={16} alignItems="center">
-        {/* Logo */}
         <Link href="/" display="flex" alignItems="center">
           <Image
             src="/logo.png"
@@ -36,17 +47,19 @@ const Navbar = () => {
 
         <Spacer />
 
-        {/* User Profile */}
         <Flex alignItems="center">
-          <Avatar size="sm" name="Charlie Brown">
-            <AvatarBadge boxSize="1.25em" bg="green.500" />
-          </Avatar>
-          <Box ml={2}>
-            <Text>Charlie Brown</Text>
-            <Text fontSize="sm" color="gray.500">
-              ACME Corporation
-            </Text>
-          </Box>
+          <Menu>
+            <MenuButton as={Button} p={0} bg={"white"}>
+              <Avatar size="sm">
+                <AvatarBadge boxSize="1.25em" bg="green.500" />
+              </Avatar>
+            </MenuButton>
+            <MenuList>
+              <MenuItem onClick={navigateToPlaceholder}>Profile</MenuItem>
+              <MenuItem onClick={navigateToPlaceholder}>Settings</MenuItem>
+              <MenuItem onClick={navigateToPlaceholder}>Log in</MenuItem>
+            </MenuList>
+          </Menu>
         </Flex>
       </Flex>
     </Box>

diff --git a/kontrol-frontend/src/main.tsx b/kontrol-frontend/src/main.tsx
@@ -11,6 +11,7 @@ import FlowsCreate from "@/pages/FlowsCreate";
 import FlowsIndex from "@/pages/FlowsIndex";
 import MaturityGates from "@/pages/MaturityGates";
 import TrafficConfiguration from "@/pages/TrafficConfiguration";
+import Profile from "@/pages/Profile";
 import NotFound from "@/pages/NotFound";
 
 import { ErrorBoundary } from "react-error-boundary";
@@ -60,6 +61,10 @@ const router = createBrowserRouter([
         path: "data-configuration",
         element: <DataConfiguration />,
       },
+      {
+        path: "profile",
+        element: <Profile />,
+      },
     ],
   },
   {

diff --git a/kontrol-frontend/src/pages/Profile.tsx b/kontrol-frontend/src/pages/Profile.tsx
@@ -0,0 +1,19 @@
+import EmptyState from "@/components/EmptyState";
+import { BiChevronLeft } from "react-icons/bi";
+import { FiUser } from "react-icons/fi";
+
+const Page = () => {
+  return (
+    <EmptyState
+      icon={FiUser}
+      buttonText="Go back"
+      buttonIcon={BiChevronLeft}
+      buttonTo="../traffic-configuration"
+    >
+      We’re working on getting this functionality up and running. We’ll let you
+      know when it’s ready for you!
+    </EmptyState>
+  );
+};
+
+export default Page;