Dental Care

components/layout/dashboard-layout.tsx

@@ -0,0 +1,51 @@
+import { AppSidebar } from "@/components/layout/app-sidebar";
+import { SiteHeader } from "@/components/layout/site-header";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { ReactNode } from "react";
+
+type UserRole = "admin" | "dentist" | "patient";
+
+interface DashboardLayoutProps {
+  user: {
+    id: string;
+    name: string;
+    email: string;
+    role: string | null | undefined;
+    image?: string | null;
+  };
+  role: UserRole;
+  children: ReactNode;
+  variant?: "inset" | "sidebar";
+}
+
+/**
+ * Shared dashboard layout component that wraps pages with SidebarProvider,
+ * AppSidebar, and SiteHeader to reduce code duplication across pages.
+ */
+export function DashboardLayout({
+  user,
+  role,
+  children,
+  variant = "inset",
+}: DashboardLayoutProps) {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant={variant} user={user} />
+      <SidebarInset>
+        <SiteHeader role={role} />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            {children}
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}