presenton/servers/nextjs/app/layout-preview

Layout Preview Studio

A modular, responsive layout preview system for viewing and testing presentation layout components with realistic sample data.

✨ Features

• Dynamic Layout Discovery: Automatically discovers and loads layout components
• Interactive Navigation: Easy navigation with quick select grid
• Beautiful Presentation Display: Mock browser frame with professional styling
• Detailed Information Panel: Layout metadata and sample data inspection
• Responsive Design: Mobile-friendly with collapsible sidebar
• Professional Loading States: Skeleton loaders and error handling
• Type Safety: Full TypeScript support with shared types

🏗️ Architecture

The system is built with a modular architecture for maintainability and reusability:

layout-preview/
├── components/              # Modular UI components
│   ├── LayoutNavigation.tsx    # Navigation controls & layout selector
│   ├── LayoutDisplay.tsx       # Main layout preview area
│   ├── LayoutInfoPanel.tsx     # Information and data structure display
│   └── LoadingStates.tsx       # Loading, error, and empty states
├── hooks/                   # Custom React hooks
│   └── useLayoutLoader.ts      # Layout loading logic and state management
├── utils/                   # Utility functions
│   └── sampleDataGenerator.ts  # Realistic sample data generation
├── types/                   # Shared TypeScript types
│   └── index.ts                # Common interfaces and types
├── page.tsx                 # Main page component
└── README.md               # This file

🧩 Components

LayoutNavigation

• Previous/Next navigation buttons
• Layout counter and current layout info
• Quick select grid for fast switching
• Responsive design with mobile optimization

LayoutDisplay

• Mock browser frame presentation
• Layout rendering with sample data
• Professional shadow and styling effects
• Empty state with helpful messaging

LayoutInfoPanel

• Layout metadata display
• Collapsible sample data viewer
• Copy to clipboard functionality
• Position tracking in collection

LoadingStates

• Loading spinner with animated dots
• Error state with retry functionality
• Empty state with helpful instructions
• Skeleton loading animations

🎯 Custom Hooks

useLayoutLoader

Handles all layout loading logic:

• Fetches layout files from API
• Imports and validates components
• Generates realistic sample data
• Provides retry functionality
• Manages loading and error states

🛠️ Utilities

sampleDataGenerator

Intelligent sample data generation:

• Context-aware field value generation
• Support for images, emails, phones, URLs
• Realistic business content
• Zod schema parsing and validation
• Array and object handling

📱 Responsive Design

The layout preview system is fully responsive:

• Desktop: Sidebar navigation with main preview area
• Tablet: Collapsible navigation panels
• Mobile: Stacked layout with touch-friendly controls

🎨 Styling

Built with:

• Tailwind CSS: Utility-first styling
• shadcn/ui: Consistent component library
• Gradient Backgrounds: Modern visual appeal
• Glass Morphism: Backdrop blur effects
• Smooth Animations: Hover and transition effects

🔧 Usage

The system automatically discovers layout components that export:

// Layout component
export default function MyLayout({ data }: { data: any }) {
  return <div>{/* Your layout */}</div>
}

// Zod schema for type safety and sample data generation
export const Schema = z.object({
  title: z.string(),
  description: z.string(),
  // ... other fields
})

🚀 Getting Started

1. Add Layout Components: Place your layout files in the appropriate directory
2. Export Requirements: Ensure each layout exports both a default component and Schema
3. Navigate: Use the navigation controls or quick select grid
4. Inspect: View layout information and sample data structure
5. Test: See how your layouts render with realistic data

🎯 Benefits

• Modular Architecture: Easy to maintain and extend
• Type Safety: Full TypeScript support prevents runtime errors
• Beautiful UI: Professional design that's pleasant to use
• Developer Experience: Quick feedback loop for layout development
• Responsive: Works on all device sizes
• Accessible: Keyboard navigation and screen reader support

📈 Performance

• Lazy Loading: Components are imported only when needed
• Optimized Rendering: Efficient re-renders with React best practices
• Minimal Bundle: Modular structure enables tree shaking
• Caching: Sample data generation is memoized