52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
}
|