added navbar

autogpt_platform/frontend/src/components/agptui/Navbar.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Navbar } from "./Navbar";
+import { userEvent, within } from "@storybook/test";
+
+const meta = {
+  title: "AGPTUI/Navbar",
+  component: Navbar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    userName: { control: "text" },
+    links: { control: "object" },
+    activeLink: { control: "text" },
+    onProfileClick: { action: "profileClicked" },
+  },
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    userName: "John Doe",
+    links: [
+      { name: "Marketplace", href: "/" },
+      { name: "Library", href: "/agents" },
+      { name: "Build", href: "/tasks" },
+    ],
+    activeLink: "/",
+    onProfileClick: () => console.log("Profile clicked"),
+  },
+};
+
+export const WithActiveLink: Story = {
+  args: {
+    ...Default.args,
+    activeLink: "/agents",
+  },
+};
+
+export const LongUserName: Story = {
+  args: {
+    ...Default.args,
+    userName: "John Doe with a Very Long Name",
+  },
+};
+
+export const ManyLinks: Story = {
+  args: {
+    userName: "Jane Smith",
+    links: [
+      { name: "Home", href: "/" },
+      { name: "Agents", href: "/agents" },
+      { name: "Tasks", href: "/tasks" },
+      { name: "Analytics", href: "/analytics" },
+      { name: "Settings", href: "/settings" },
+    ],
+    activeLink: "/analytics",
+    onProfileClick: () => console.log("Profile clicked"),
+  },
+};
+
+export const WithInteraction: Story = {
+  args: {
+    ...Default.args,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const profileElement = canvas.getByText("John Doe");
+
+    await userEvent.click(profileElement);
+  },
+};

autogpt_platform/frontend/src/components/agptui/Navbar.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import Link from "next/link";
+
+interface NavLink {
+  name: string;
+  href: string;
+}
+
+interface NavbarProps {
+  userName: string;
+  links: NavLink[];
+  activeLink: string;
+  onProfileClick: () => void;
+}
+
+export const Navbar: React.FC<NavbarProps> = ({
+  userName,
+  links,
+  activeLink,
+  onProfileClick,
+}) => {
+  return (
+    <nav className="flex h-[5.5rem] w-screen items-center justify-between border border-black/10 bg-[#f0f0f0] px-10">
+      <div className="flex items-center space-x-10">
+        {links.map((link) => (
+          <div key={link.name} className="relative">
+            <Link href={link.href}>
+              <div
+                className={`text-[${activeLink === link.href ? "#272727" : "#474747"}] font-neue text-2xl font-medium leading-9 tracking-tight`}
+              >
+                {link.name}
+              </div>
+            </Link>
+            {activeLink === link.href && (
+              <div className="absolute bottom-[-30px] left-[-10px] h-1.5 w-full bg-[#282828]" />
+            )}
+          </div>
+        ))}
+      </div>
+      <div className="flex items-center space-x-5">
+        <div
+          className="font-neue cursor-pointer text-2xl font-medium leading-9 tracking-tight text-[#474747]"
+          onClick={onProfileClick}
+        >
+          {userName}
+        </div>
+        <div className="h-10 w-10 cursor-pointer" onClick={onProfileClick}>
+          <div className="h-10 w-10 rounded-full border border-[#474747] bg-[#dbdbdb]" />
+        </div>
+      </div>
+    </nav>
+  );
+};