kit/components/layout/AppPage.tsx

import * as React from 'react';
import { cn } from '@/lib/utils';

interface AppPageProps {
  title: string;
  description?: string;
  icon?: React.ElementType;
  children: React.ReactNode;
  className?: string;
}

export function AppPage({ title, description, icon: Icon, children, className }: AppPageProps) {
  return (
    <div className={cn('min-h-screen', className)}>
      <div className="max-w-7xl mx-auto px-6 lg:px-8 animate-fade-in">

        {/* Page header */}
        <div className="py-5 border-b border-border/20 mb-6">
          <div className="flex items-center gap-3">
            {Icon && (
              <div className="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
                <Icon className="w-3.5 h-3.5 text-primary" />
              </div>
            )}
            <div className="min-w-0">
              <h1 className="text-lg font-semibold text-foreground leading-tight">{title}</h1>
              {description && (
                <p className="text-[10px] text-muted-foreground/50 font-mono mt-0.5 truncate">
                  {description}
                </p>
              )}
            </div>
          </div>
        </div>

        <div className="pb-8">
          {children}
        </div>
      </div>
    </div>
  );
}