Parallel Routes Layout

// app/dashboard/layout.tsx
// Parallel routes use @folder convention for named slots

export default function DashboardLayout({
  children,
  analytics,
  notifications,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  notifications: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-12 gap-6 p-6">
      {/* Main content */}
      <div className="col-span-8">{children}</div>

      {/* Sidebar with parallel slots */}
      <div className="col-span-4 space-y-6">
        {analytics}
        {notifications}
      </div>
    </div>
  );
}

// File structure:
// app/dashboard/
//   layout.tsx          <- this file
//   page.tsx            <- renders in {children}
//   @analytics/
//     page.tsx          <- renders in {analytics}
//     loading.tsx       <- independent loading state
//   @notifications/
//     page.tsx          <- renders in {notifications}
//     loading.tsx       <- independent loading state
//
// Each slot loads independently with its own loading/error states.
// Navigation preserves all slots — no full page reload.