story-generator/src/components/layouts/DashboardPageLayout.tsx

import React from 'react';
import { DashboardSidebar } from './DashboardSidebar';

interface DashboardPageLayoutProps {
  children: React.ReactNode;
  title: string;
  description?: string;
}

export function DashboardPageLayout({ 
  children, 
  title, 
  description 
}: DashboardPageLayoutProps): JSX.Element {
  return (
    <div className="min-h-screen bg-gray-50 flex">
      <DashboardSidebar />
      
      <main className="flex-1 min-h-screen transition-all duration-300">
        <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="mb-6 sm:mb-8">
            <h1 className="text-2xl sm:text-3xl font-bold text-primary mb-2">
              {title}
            </h1>
            {description && (
              <p className="text-sm sm:text-base text-gray-600">
                {description}
              </p>
            )}
          </div>
          
          <div className="space-y-6">
            {children}
          </div>
        </div>
      </main>
    </div>
  );
}