Add Creator Dashboard

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

@@ -22,7 +22,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
         <SheetTrigger asChild>
           <button
             aria-label="Open sidebar menu"
-            className="fixed left-0 top-1/2 rounded-r-xl border border-neutral-500 bg-neutral-200 p-1 md:hidden"
+            className="fixed left-0 top-1/2 rounded-r-xl border border-neutral-500 bg-neutral-200 p-1 lg:hidden"
           >
             <Menu className="h-6 w-6" />
             <span className="sr-only">Open sidebar menu</span>
@@ -55,7 +55,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
           </div>
         </SheetContent>
       </Sheet>
-      <div className="relative hidden h-[934px] w-[280px] md:block">
+      <div className="relative hidden h-[934px] w-[280px] lg:block">
         <div className="absolute left-0 top-0 h-full w-full bg-neutral-100" />
         <div className="absolute left-10 top-[63px] flex w-[210px] flex-col items-start justify-start gap-[30px]">
           <h2 className="self-stretch font-neue text-xl font-normal leading-7 tracking-tight text-neutral-900 hover:text-neutral-700">

autogpt_platform/frontend/src/components/agptui/pages/CreatorDashboardPage.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CreatorDashboardPage } from "./CreatorDashboardPage";
+import { IconType } from "../../ui/icons";
+
+const meta: Meta<typeof CreatorDashboardPage> = {
+  title: "AGPT UI/Agent Store/Creator Dashboard Page",
+  component: CreatorDashboardPage,
+  parameters: {
+    layout: {
+      center: true,
+      fullscreen: true,
+      padding: 0,
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof CreatorDashboardPage>;
+
+const sampleNavLinks = [
+  { name: "Home", href: "/" },
+  { name: "Marketplace", href: "/marketplace" },
+  { name: "Dashboard", href: "/dashboard" },
+];
+
+const sampleMenuItemGroups = [
+  {
+    items: [
+      { icon: IconType.Edit, text: "Edit profile", href: "/profile/edit" },
+    ],
+  },
+  {
+    items: [
+      {
+        icon: IconType.LayoutDashboard,
+        text: "Creator Dashboard",
+        href: "/dashboard",
+      },
+      {
+        icon: IconType.UploadCloud,
+        text: "Publish an agent",
+        href: "/publish",
+      },
+    ],
+  },
+  {
+    items: [{ icon: IconType.Settings, text: "Settings", href: "/settings" }],
+  },
+  {
+    items: [
+      {
+        icon: IconType.LogOut,
+        text: "Log out",
+        onClick: () => console.log("Logged out"),
+      },
+    ],
+  },
+];
+
+const sampleSidebarLinkGroups = [
+  {
+    links: [{ text: "Integrations", href: "/integrations" }],
+  },
+  {
+    links: [
+      { text: "Profile", href: "/profile" },
+      { text: "Settings", href: "/settings" },
+    ],
+  },
+];
+
+const sampleAgents = [
+  {
+    agentName: "Super Coder",
+    description: "An AI agent that writes clean, efficient code",
+    imageSrc:
+      "https://ddz4ak4pa3d19.cloudfront.net/cache/11/47/114784105a9b180e08e117cbf2612e5b.jpg",
+    dateSubmitted: "2023-05-15",
+    status: "Active",
+    runs: 1500,
+    rating: 4.8,
+    onEdit: () => console.log("Edit Super Coder"),
+  },
+  {
+    agentName: "Data Analyzer",
+    description: "Processes and analyzes large datasets with ease",
+    imageSrc:
+      "https://ddz4ak4pa3d19.cloudfront.net/cache/40/f7/40f7bc97c952f8df0f9c88d29defe8d4.jpg",
+    dateSubmitted: "2023-05-10",
+    status: "Active",
+    runs: 1200,
+    rating: 4.5,
+    onEdit: () => console.log("Edit Data Analyzer"),
+  },
+];
+
+export const Default: Story = {
+  args: {
+    userName: "John Doe",
+    userEmail: "john.doe@example.com",
+    navLinks: sampleNavLinks,
+    activeLink: "Dashboard",
+    menuItemGroups: sampleMenuItemGroups,
+    sidebarLinkGroups: sampleSidebarLinkGroups,
+    agents: sampleAgents,
+  },
+};
+
+export const NoAgents: Story = {
+  args: {
+    ...Default.args,
+    agents: [],
+  },
+};
+
+export const ManyAgents: Story = {
+  args: {
+    ...Default.args,
+    agents: Array(10)
+      .fill(sampleAgents[0])
+      .map((agent, index) => ({
+        ...agent,
+        agentName: `Agent ${index + 1}`,
+        onEdit: () => console.log(`Edit Agent ${index + 1}`),
+      })),
+  },
+};

autogpt_platform/frontend/src/components/agptui/pages/CreatorDashboardPage.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Navbar } from "../Navbar";
+import { Sidebar } from "../Sidebar";
+import { AgentTable } from "../AgentTable";
+import { Button } from "../Button";
+import { Separator } from "@/components/ui/separator";
+import { IconType } from "../../ui/icons";
+
+interface CreatorDashboardPageProps {
+  userName: string;
+  userEmail: string;
+  navLinks: { name: string; href: string }[];
+  activeLink: string;
+  menuItemGroups: {
+    groupName?: string;
+    items: {
+      icon: IconType;
+      text: string;
+      href?: string;
+      onClick?: () => void;
+    }[];
+  }[];
+  sidebarLinkGroups: {
+    links: {
+      text: string;
+      href: string;
+    }[];
+  }[];
+  agents: {
+    agentName: string;
+    description: string;
+    imageSrc: string;
+    dateSubmitted: string;
+    status: string;
+    runs: number;
+    rating: number;
+    onEdit: () => void;
+  }[];
+}
+
+export const CreatorDashboardPage: React.FC<CreatorDashboardPageProps> = ({
+  userName,
+  userEmail,
+  navLinks,
+  activeLink,
+  menuItemGroups,
+  sidebarLinkGroups,
+  agents,
+}) => {
+  return (
+    <div className="mx-auto w-full max-w-[1440px] bg-white">
+      <Navbar
+        userName={userName}
+        userEmail={userEmail}
+        links={navLinks}
+        activeLink={activeLink}
+        menuItemGroups={menuItemGroups}
+      />
+
+      <div className="flex">
+        <Sidebar linkGroups={sidebarLinkGroups} />
+
+        <main className="flex-1 px-6 py-8 md:px-10">
+          {/* Header Section */}
+          <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div>
+              <h1 className="font-neue text-3xl font-medium leading-9 tracking-tight text-neutral-900">
+                Submit a New Agent
+              </h1>
+              <p className="mt-2 font-neue text-sm text-[#707070]">
+                Select from the list of agents you currently have, or upload
+                from your local machine.
+              </p>
+            </div>
+            <Button variant="default" size="lg">
+              Create New Agent
+            </Button>
+          </div>
+
+          <Separator className="mb-8" />
+
+          {/* Agents Section */}
+          <div>
+            <h2 className="mb-4 text-xl font-bold text-neutral-900">
+              Your Agents
+            </h2>
+            <AgentTable agents={agents} />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+};