From c47bacf3a9a223c226f237e6868c1ecd07edfd66 Mon Sep 17 00:00:00 2001
From: myusername <sarthaksam003@gmail.com>
Date: Fri, 15 May 2026 12:11:16 +0530
Subject: [PATCH] feat: Topbar component created.

---
 src/layouts/AdminLayout.tsx                   | 270 ++++++++++++++++++
 src/layouts/MainLayout/BaseLayout.tsx         |  28 +-
 src/routes/MainRouters.tsx                    |  21 +-
 src/routes/index.tsx                          |   2 +-
 .../composites/SidebarNav/SidebarNav.tsx      |   2 +-
 .../composites/Topbar/Topbar.stories.tsx      |  70 +++++
 src/shared/composites/Topbar/Topbar.tsx       |  60 ++++
 src/shared/composites/Topbar/index.ts         |   2 +
 src/views/LoginPage.tsx                       | 128 +--------
 9 files changed, 429 insertions(+), 154 deletions(-)
 create mode 100644 src/layouts/AdminLayout.tsx
 create mode 100644 src/shared/composites/Topbar/Topbar.stories.tsx
 create mode 100644 src/shared/composites/Topbar/Topbar.tsx
 create mode 100644 src/shared/composites/Topbar/index.ts

diff --git a/src/layouts/AdminLayout.tsx b/src/layouts/AdminLayout.tsx
new file mode 100644
index 0000000..dab3b6d
--- /dev/null
+++ b/src/layouts/AdminLayout.tsx
@@ -0,0 +1,270 @@
+import React, { useState } from 'react'
+
+import { Outlet } from 'react-router-dom'
+
+import { SidebarNav } from '@/shared/composites/SidebarNav'
+
+import { Topbar } from '@/shared/composites/Topbar'
+
+import { AvatarMenu } from '@/shared/composites/AvatarMenu/AvatarMenu'
+
+import { ToastProvider } from '@/shared/integrations/Toast'
+
+import {
+  CheckIcon,
+  ExclamationTriangleIcon,
+  PresentationChartLineIcon,
+  QueueListIcon,
+  UsersIcon,
+} from '@heroicons/react/24/outline'
+
+const AdminLayout = () => {
+  const [collapsed, setCollapsed] = useState(false)
+  const [activeItem, setActiveItem] = useState('Queue')
+
+  return (
+    //     <div
+    //         className="
+    //     min-h-screen
+    //     bg-bg-primary
+    //     text-text-primary
+    //   "
+    //     >
+    //         <ToastProvider />
+
+    //         {/* Sidebar */}
+    //         <aside
+    //             className={`fixed top-0 left-0 z-30 h-screen transition-all duration-300 ${collapsed ? 'w-18' : 'w-64'
+    //                 } `}
+    //         >
+    //             <SidebarNav
+    //                 collapsed={collapsed}
+    //                 onToggle={() => {
+    //                     setCollapsed(!collapsed)
+    //                 }}
+    //                 items={[
+    //                     {
+    //                         label: 'Queue',
+
+    //                         icon: <QueueListIcon className="size-4" />,
+
+    //                         badge: 3,
+
+    //                         badgeVariant: 'danger',
+
+    //                         isActive: activeItem === 'Queue',
+
+    //                         onClick: () => {
+    //                             setActiveItem('Queue')
+
+    //                             console.log('Queue clicked')
+    //                         },
+    //                     },
+
+    //                     {
+    //                         label: 'Resolved',
+
+    //                         icon: <CheckIcon className="size-4" />,
+
+    //                         badge: 12,
+
+    //                         badgeVariant: 'info',
+
+    //                         isActive: activeItem === 'Resolved',
+
+    //                         onClick: () => {
+    //                             setActiveItem('Resolved')
+
+    //                             console.log('Resolved clicked')
+    //                         },
+    //                     },
+
+    //                     {
+    //                         label: 'Escalated',
+
+    //                         icon: <ExclamationTriangleIcon className="size-4" />,
+
+    //                         badge: 1,
+
+    //                         badgeVariant: 'danger',
+
+    //                         isActive: activeItem === 'Escalated',
+
+    //                         onClick: () => {
+    //                             setActiveItem('Escalated')
+
+    //                             console.log('Escalated clicked')
+    //                         },
+    //                     },
+
+    //                     {
+    //                         label: 'Users',
+
+    //                         icon: <UsersIcon className="size-4" />,
+
+    //                         isActive: activeItem === 'Users',
+
+    //                         onClick: () => {
+    //                             setActiveItem('Users')
+
+    //                             console.log('Users clicked')
+    //                         },
+    //                     },
+
+    //                     {
+    //                         label: 'Analytics',
+
+    //                         icon: <PresentationChartLineIcon className="size-4" />,
+
+    //                         isActive: activeItem === 'Analytics',
+
+    //                         onClick: () => {
+    //                             setActiveItem('Analytics')
+
+    //                             console.log('Analytics clicked')
+    //                         },
+    //                     },
+    //                 ]}
+    //             />
+    //         </aside>
+    //         <main
+    //             className={`flex min-h-screen items-center justify-center transition-all duration-300 ${collapsed ? 'w-[72px]' : 'w-64'
+    //                 } `}
+    //         >
+    //         </main>
+    //         <div
+    //             className={`
+    //       transition-all
+    //       duration-300
+    //       ${collapsed
+    //                     ? 'ml-[72px]'
+    //                     : 'ml-64'
+    //                 }
+    //     `}
+    //         >
+
+    //             <main className="p-6">
+    //                 <Outlet />
+    //             </main>
+    //         </div>
+    //     </div>
+    <div className="bg-bg-primary text-text-primary min-h-screen">
+      <ToastProvider />
+
+      <aside
+        className={`fixed top-0 left-0 z-30 h-screen transition-all duration-300 ${
+          collapsed ? 'w-[72px]' : 'w-64'
+        } `}
+      >
+        <SidebarNav
+          collapsed={collapsed}
+          onToggle={() => {
+            setCollapsed(!collapsed)
+          }}
+          items={[
+            {
+              label: 'Queue',
+
+              icon: <QueueListIcon className="size-4" />,
+
+              badge: 3,
+
+              badgeVariant: 'danger',
+
+              isActive: activeItem === 'Queue',
+
+              onClick: () => {
+                setActiveItem('Queue')
+
+                console.log('Queue clicked')
+              },
+            },
+
+            {
+              label: 'Resolved',
+
+              icon: <CheckIcon className="size-4" />,
+
+              badge: 12,
+
+              badgeVariant: 'info',
+
+              isActive: activeItem === 'Resolved',
+
+              onClick: () => {
+                setActiveItem('Resolved')
+
+                console.log('Resolved clicked')
+              },
+            },
+
+            {
+              label: 'Escalated',
+
+              icon: <ExclamationTriangleIcon className="size-4" />,
+
+              badge: 1,
+
+              badgeVariant: 'danger',
+
+              isActive: activeItem === 'Escalated',
+
+              onClick: () => {
+                setActiveItem('Escalated')
+
+                console.log('Escalated clicked')
+              },
+            },
+
+            {
+              label: 'Users',
+
+              icon: <UsersIcon className="size-4" />,
+
+              isActive: activeItem === 'Users',
+
+              onClick: () => {
+                setActiveItem('Users')
+
+                console.log('Users clicked')
+              },
+            },
+
+            {
+              label: 'Analytics',
+
+              icon: <PresentationChartLineIcon className="size-4" />,
+
+              isActive: activeItem === 'Analytics',
+
+              onClick: () => {
+                setActiveItem('Analytics')
+
+                console.log('Analytics clicked')
+              },
+            },
+          ]}
+        />
+      </aside>
+
+      <div className={`transition-all duration-300 ${collapsed ? 'ml-[72px]' : 'ml-64'} `}>
+        <Topbar
+          title="Moderation Queue"
+          actionsSlot={<AvatarMenu name="Admin Mod" />}
+          searchSlot={
+            <input
+              className="w-full bg-transparent text-sm outline-none"
+              placeholder="Search reports..."
+            />
+          }
+        />
+
+        <main className="p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default AdminLayout
diff --git a/src/layouts/MainLayout/BaseLayout.tsx b/src/layouts/MainLayout/BaseLayout.tsx
index 6851278..b480ce6 100644
--- a/src/layouts/MainLayout/BaseLayout.tsx
+++ b/src/layouts/MainLayout/BaseLayout.tsx
@@ -1,29 +1,17 @@
-import AvatarMenu from '@/shared/composites/AvatarMenu/AvatarMenu'
-import { ToastProvider } from '@/shared/integrations/Toast'
-import { Tooltip } from '@/shared/primitives/Tooltip'
-// import ThemeToggleSwitch from '@/ThemeToggleSwitch'
 import React, { Suspense } from 'react'
+
 import { Outlet } from 'react-router-dom'
 
+import { ToastProvider } from '@/shared/integrations/Toast'
+
 const BaseLayout: React.FC = () => {
   return (
-    <div className="bg-bg-primary flex min-h-screen flex-col">
-      {/* Main Content */}
+    <div className="bg-bg-primary text-text-primary min-h-screen">
       <ToastProvider />
-      <main className="">
-        <div className="text-text-primary">
-          <Suspense fallback={null}>
-            <Outlet />
-            <div className="absolute top-4 right-10 flex gap-2">
-              <Tooltip
-                children={<AvatarMenu name="Admin Mod" />}
-                content="Settings"
-                position="left"
-              />
-            </div>
-          </Suspense>
-        </div>
-      </main>
+
+      <Suspense fallback={null}>
+        <Outlet />
+      </Suspense>
     </div>
   )
 }
diff --git a/src/routes/MainRouters.tsx b/src/routes/MainRouters.tsx
index 03270a3..60827bc 100644
--- a/src/routes/MainRouters.tsx
+++ b/src/routes/MainRouters.tsx
@@ -1,6 +1,6 @@
-import OAuthCallback from '@views/Auth/OAuthCallBack'
-import BaseLayout from '@layouts/MainLayout/BaseLayout'
-import NotFound from '@views/NotFound/NotFound'
+// import OAuthCallback from '@views/Auth/OAuthCallBack'
+// import BaseLayout from '@layouts/MainLayout/BaseLayout'
+// import NotFound from '@views/NotFound/NotFound'
 // import HomePage from "@/views/Home/Home";
 // import InscriptionDetails from "@/views/InscriptionDetailPage.tsx/InscriptionDetails";
 // import Upload from "@/views/Upload/Upload";
@@ -12,24 +12,15 @@ import NotFound from '@views/NotFound/NotFound'
 // import Setting from "@views/Setting/Setting";
 // import { Navigate } from 'react-router-dom'
 import LoginPage from '@/views/LoginPage'
+import AdminLayout from '@/layouts/AdminLayout'
 
-const MainRoutes = {
+export const MainRoutes = {
   path: '/',
-  element: <BaseLayout />,
+  element: <AdminLayout />,
   children: [
     {
       index: true,
       element: <LoginPage />,
     },
-    {
-      path: 'oauth/callback',
-      element: <OAuthCallback />,
-    },
-    {
-      path: '*',
-      element: <NotFound />,
-    },
   ],
 }
-
-export default MainRoutes
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 15a4517..a4bade8 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,5 @@
 import { createBrowserRouter } from 'react-router-dom'
-import MainRoutes from './MainRouters'
+import { MainRoutes } from './MainRouters'
 
 const router = createBrowserRouter([MainRoutes])
 
diff --git a/src/shared/composites/SidebarNav/SidebarNav.tsx b/src/shared/composites/SidebarNav/SidebarNav.tsx
index 4b54264..9c006bd 100644
--- a/src/shared/composites/SidebarNav/SidebarNav.tsx
+++ b/src/shared/composites/SidebarNav/SidebarNav.tsx
@@ -79,7 +79,7 @@ export function SidebarNav({
       })}
     >
       {/* Header */}
-      <div className="border-border-secondary flex items-center justify-between border-b px-4 py-4">
+      <div className="border-border-secondary flex h-16 items-center justify-between border-b px-4 py-4">
         {!collapsed && (
           <div className="flex flex-col">
             <h2 className="text-text-primary text-lg font-semibold">ModerationOS</h2>
diff --git a/src/shared/composites/Topbar/Topbar.stories.tsx b/src/shared/composites/Topbar/Topbar.stories.tsx
new file mode 100644
index 0000000..413a380
--- /dev/null
+++ b/src/shared/composites/Topbar/Topbar.stories.tsx
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { MagnifyingGlassIcon, BellIcon } from '@heroicons/react/24/outline'
+
+import { Topbar } from './Topbar'
+
+import { AvatarMenu } from '@/shared/composites/AvatarMenu/AvatarMenu'
+
+import { Button } from '@/shared/primitives/Button'
+
+const meta = {
+  title: 'Shared/Composites/Topbar',
+
+  component: Topbar,
+
+  tags: ['autodocs'],
+} satisfies Meta<typeof Topbar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'Moderation Queue',
+
+    actionsSlot: (
+      <>
+        <Button variant="ghost" size="sd">
+          <BellIcon className="size-5" />
+        </Button>
+
+        <AvatarMenu name="Admin Mod" />
+      </>
+    ),
+  },
+}
+
+export const WithSearch: Story = {
+  args: {
+    title: 'Moderation Queue',
+
+    searchSlot: (
+      <div className="border-border-secondary bg-bg-secondary flex items-center gap-2 rounded-md border px-3 py-2">
+        <MagnifyingGlassIcon className="text-text-tertiary size-4" />
+
+        <input
+          placeholder="Search reports..."
+          className="w-full bg-transparent text-sm outline-none"
+        />
+      </div>
+    ),
+
+    actionsSlot: <AvatarMenu name="Admin Mod" />,
+  },
+}
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+
+  args: {
+    title: 'Moderation Queue',
+
+    actionsSlot: <AvatarMenu name="Admin Mod" />,
+  },
+}
diff --git a/src/shared/composites/Topbar/Topbar.tsx b/src/shared/composites/Topbar/Topbar.tsx
new file mode 100644
index 0000000..5f6e0b1
--- /dev/null
+++ b/src/shared/composites/Topbar/Topbar.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+
+import { Bars3Icon } from '@heroicons/react/24/outline'
+
+export interface TopbarProps {
+  title: string
+
+  searchSlot?: React.ReactNode
+
+  actionsSlot?: React.ReactNode
+
+  onMenuToggle?: () => void
+
+  className?: string
+}
+
+export function Topbar({
+  title,
+
+  searchSlot,
+
+  actionsSlot,
+
+  onMenuToggle,
+
+  className = '',
+}: TopbarProps) {
+  return (
+    <header
+      className={`border-border-tertiary bg-bg-secondary sticky top-0 z-20 flex h-16 items-center justify-between border-b px-4 md:px-6 ${className} `}
+    >
+      {/* Left */}
+      <div className="flex items-center gap-3 md:min-w-[200px]">
+        {/* Mobile hamburger */}
+        <button
+          type="button"
+          onClick={onMenuToggle}
+          className="text-text-secondary hover:bg-bg-secondary hover:text-text-primary rounded-md p-2 transition-colors md:hidden"
+        >
+          <Bars3Icon className="size-5" />
+        </button>
+
+        {/* Title */}
+        <h1 className="text-text-primary text-lg font-semibold">{title}</h1>
+      </div>
+
+      {/* Desktop Search */}
+      {searchSlot && (
+        <div className="hidden flex-1 px-6 md:flex md:justify-center">
+          <div className="w-full max-w-xl">{searchSlot}</div>
+        </div>
+      )}
+
+      {/* Right Actions */}
+      <div className="flex items-center gap-2 md:min-w-[200px] md:justify-end">{actionsSlot}</div>
+    </header>
+  )
+}
+
+export default Topbar
diff --git a/src/shared/composites/Topbar/index.ts b/src/shared/composites/Topbar/index.ts
new file mode 100644
index 0000000..0e78927
--- /dev/null
+++ b/src/shared/composites/Topbar/index.ts
@@ -0,0 +1,2 @@
+export * from './Topbar'
+export { default } from './Topbar'
diff --git a/src/views/LoginPage.tsx b/src/views/LoginPage.tsx
index fa22f7a..51940c8 100644
--- a/src/views/LoginPage.tsx
+++ b/src/views/LoginPage.tsx
@@ -1,127 +1,21 @@
 import LoginCard from '@/LoginCard'
 
-import { SidebarNav } from '@/shared/composites/SidebarNav'
+// import { SidebarNav } from '@/shared/composites/SidebarNav'
 
-import {
-  CheckIcon,
-  ExclamationTriangleIcon,
-  PresentationChartLineIcon,
-  QueueListIcon,
-  UsersIcon,
-} from '@heroicons/react/24/outline'
+// import {
+//   CheckIcon,
+//   ExclamationTriangleIcon,
+//   PresentationChartLineIcon,
+//   QueueListIcon,
+//   UsersIcon,
+// } from '@heroicons/react/24/outline'
 
-import { useState } from 'react'
+// import { useState } from 'react'
 
 const LoginPage = () => {
-  const [collapsed, setCollapsed] = useState(false)
-  const [activeItem, setActiveItem] = useState('Queue')
   return (
-    <div className="bg-bg-primary min-h-screen">
-      {/* Sidebar */}
-      <aside
-        className={`fixed top-0 left-0 z-30 h-screen transition-all duration-300 ${
-          collapsed ? 'w-18' : 'w-64'
-        } `}
-      >
-        <SidebarNav
-          collapsed={collapsed}
-          onToggle={() => {
-            setCollapsed(!collapsed)
-          }}
-          items={[
-            {
-              label: 'Queue',
-
-              icon: <QueueListIcon className="size-4" />,
-
-              badge: 3,
-
-              badgeVariant: 'danger',
-
-              isActive: activeItem === 'Queue',
-
-              onClick: () => {
-                setActiveItem('Queue')
-
-                console.log('Queue clicked')
-              },
-            },
-
-            {
-              label: 'Resolved',
-
-              icon: <CheckIcon className="size-4" />,
-
-              badge: 12,
-
-              badgeVariant: 'info',
-
-              isActive: activeItem === 'Resolved',
-
-              onClick: () => {
-                setActiveItem('Resolved')
-
-                console.log('Resolved clicked')
-              },
-            },
-
-            {
-              label: 'Escalated',
-
-              icon: <ExclamationTriangleIcon className="size-4" />,
-
-              badge: 1,
-
-              badgeVariant: 'danger',
-
-              isActive: activeItem === 'Escalated',
-
-              onClick: () => {
-                setActiveItem('Escalated')
-
-                console.log('Escalated clicked')
-              },
-            },
-
-            {
-              label: 'Users',
-
-              icon: <UsersIcon className="size-4" />,
-
-              isActive: activeItem === 'Users',
-
-              onClick: () => {
-                setActiveItem('Users')
-
-                console.log('Users clicked')
-              },
-            },
-
-            {
-              label: 'Analytics',
-
-              icon: <PresentationChartLineIcon className="size-4" />,
-
-              isActive: activeItem === 'Analytics',
-
-              onClick: () => {
-                setActiveItem('Analytics')
-
-                console.log('Analytics clicked')
-              },
-            },
-          ]}
-        />
-      </aside>
-
-      {/* Main Content */}
-      <main
-        className={`flex min-h-screen items-center justify-center transition-all duration-300 ${
-          collapsed ? 'w-[72px]' : 'w-64'
-        } `}
-      >
-        <LoginCard />
-      </main>
+    <div className="flex min-h-screen items-center justify-center">
+      <LoginCard />
     </div>
   )
 }