import * as React from 'react';
import { cn } from '@slack-verify-1770279078/ui';
export interface DashboardShellProps {
/** Sidebar element to render on the left */
sidebar?: React.ReactNode;
/** Header element to render at the top */
header?: React.ReactNode;
/** Main content */
children: React.ReactNode;
/** Width of the sidebar in pixels (default: 256) */
sidebarWidth?: number;
/** Height of the header in pixels (default: 64) */
headerHeight?: number;
/** Additional class names for the main content area */
className?: string;
}
/**
* DashboardShell provides a standard layout for dashboard applications
* with a fixed sidebar, header, and scrollable main content area.
*
* @example
* }
* header={}
* >
*
*
*/
export function DashboardShell({
sidebar,
header,
children,
sidebarWidth = 256,
headerHeight = 64,
className,
}: DashboardShellProps) {
return (
{/* Sidebar */}
{sidebar && (
)}
{/* Main area */}