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;

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import clsx from 'clsx';
+
+export interface SidebarItem {
+  label: string;
+  href: string;
+  icon?: ReactNode;
+}
+
+export interface SidebarProps {
+  title?: string;
+  items: SidebarItem[];
+  activeHref?: string;
+  onNavigate?: (href: string) => void;
+}
+
+const Sidebar = ({ title, items, activeHref, onNavigate }: SidebarProps) => (
+  <aside className="flex w-60 flex-col gap-1 border-r border-gray-200 bg-white px-3 py-4">
+    {title ? <div className="px-2 pb-3 text-sm font-semibold text-gray-700">{title}</div> : null}
+    <nav className="flex flex-col gap-0.5">
+      {items.map((item) => (
+        <a
+          key={item.href}
+          href={item.href}
+          onClick={(event) => {
+            if (onNavigate) {
+              event.preventDefault();
+              onNavigate(item.href);
+            }
+          }}
+          className={clsx(
+            'flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors',
+            activeHref === item.href
+              ? 'bg-blue-50 text-blue-700'
+              : 'text-gray-700 hover:bg-gray-100',
+          )}
+        >
+          {item.icon ? <span className="text-gray-500">{item.icon}</span> : null}
+          <span>{item.label}</span>
+        </a>
+      ))}
+    </nav>
+  </aside>
+);
+
+export default Sidebar;

packages/ui-common/src/components/Layout/index.ts

@@ -0,0 +1,4 @@
+export { default as Sidebar } from './Sidebar';
+export { default as DashboardLayout } from './DashboardLayout';
+export type { SidebarProps, SidebarItem } from './Sidebar';
+export type { DashboardLayoutProps } from './DashboardLayout';