Project Initialization

packages/ui-common/src/components/Layout/DashboardLayout.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import Sidebar, { SidebarItem } from './Sidebar';
+
+export interface DashboardLayoutProps {
+  title?: string;
+  sidebarItems: SidebarItem[];
+  activeHref?: string;
+  onNavigate?: (href: string) => void;
+  headerRight?: ReactNode;
+  children: ReactNode;
+}
+
+const DashboardLayout = ({
+  title,
+  sidebarItems,
+  activeHref,
+  onNavigate,
+  headerRight,
+  children,
+}: DashboardLayoutProps) => (
+  <div className="flex min-h-screen bg-gray-50">
+    <Sidebar
+      title={title}
+      items={sidebarItems}
+      activeHref={activeHref}
+      onNavigate={onNavigate}
+    />
+    <div className="flex flex-1 flex-col">
+      <header className="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
+        <div className="text-sm font-medium text-gray-700">{title}</div>
+        <div>{headerRight}</div>
+      </header>
+      <main className="flex-1 overflow-auto p-6">{children}</main>
+    </div>
+  </div>
+);
+
+export default DashboardLayout;