Page Components

/**
 * Container component for page content with integrated header, breadcrumbs, and tabs
 * @param props - Page container configuration and content
 * @returns React element with complete page structure
 */
function PageContainer(props: PageContainerProps): React.ReactElement;

interface PageContainerProps {
  /** Page title displayed in header */
  title?: React.ReactNode | false;
  
  /** Page description content below title */
  content?: React.ReactNode;
  
  /** Additional content area in header */
  extraContent?: React.ReactNode;
  
  /** CSS class prefix for styling */
  prefixCls?: string;
  
  /** Footer content array */
  footer?: React.ReactNode[];
  
  /** Custom design tokens */
  token?: PageContainerToken;
  
  /** Page header configuration */
  header?: Partial<PageHeaderProps> & {
    children?: React.ReactNode;
  };
  
  /** Custom page header renderer */
  pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
  
  /** Affix configuration for fixed header */
  affixProps?: Omit<AffixProps, 'children'>;
  
  /** Loading state configuration */
  loading?: boolean | SpinProps | React.ReactNode;
  
  /** Custom breadcrumb renderer */
  breadcrumbRender?: PageHeaderProps['breadcrumbRender'] | false;
  
  /** Watermark configuration */
  waterMarkProps?: WaterMarkProps;
  
  /** Tab configuration */
  tabList?: (TabPaneProps & { key?: React.Key })[];
  
  /** Active tab key */
  tabActiveKey?: TabsProps['activeKey'];
  
  /** Tab change callback */
  onTabChange?: TabsProps['onChange'];
  
  /** Extra content in tab bar */
  tabBarExtraContent?: TabsProps['tabBarExtraContent'];
  
  /** Tab bar properties */
  tabProps?: TabsProps;
  
  /** Fixed header to page top */
  fixedHeader?: boolean;
  
  /** Ghost mode styling */
  ghost?: boolean;
  
  /** Child components (page content) */
  children?: React.ReactNode;
}

interface PageContainerToken {
  /** Container padding */
  paddingInlinePageContainerContent?: number;
  /** Container background color */
  colorBgPageContainer?: string;
  /** Header background color */
  colorBgPageContainerFixed?: string;
}

import React from "react";
import { PageContainer } from "@ant-design/pro-layout";
import { Button, Card } from "antd";

// Basic page container
function BasicPage() {
  return (
    <PageContainer
      title="User Management"
      content="Manage system users and their permissions"
      extraContent={<Button type="primary">Add User</Button>}
    >
      <Card>
        <p>Page content goes here</p>
      </Card>
    </PageContainer>
  );
}

// Page with tabs
function TabbedPage() {
  const [activeTab, setActiveTab] = React.useState("users");
  
  return (
    <PageContainer
      title="System Management"
      tabList={[
        { tab: "Users", key: "users" },
        { tab: "Roles", key: "roles" },
        { tab: "Permissions", key: "permissions" },
      ]}
      tabActiveKey={activeTab}
      onTabChange={setActiveTab}
      tabBarExtraContent={<Button>Extra Action</Button>}
    >
      <Card>
        {activeTab === "users" && <div>Users content</div>}
        {activeTab === "roles" && <div>Roles content</div>}
        {activeTab === "permissions" && <div>Permissions content</div>}
      </Card>
    </PageContainer>
  );
}

// Page with loading state
function LoadingPage() {
  const [loading, setLoading] = React.useState(true);
  
  React.useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, []);
  
  return (
    <PageContainer
      title="Dashboard"
      loading={loading}
    >
      <Card>Dashboard content</Card>
    </PageContainer>
  );
}

// Page with custom header
function CustomHeaderPage() {
  return (
    <PageContainer
      pageHeaderRender={() => (
        <div style={{ padding: 24, background: "#f0f2f5" }}>
          <h1>Custom Header</h1>
          <p>This is a custom header implementation</p>
        </div>
      )}
    >
      <Card>Content with custom header</Card>
    </PageContainer>
  );
}

/**
 * Standalone page header with title, breadcrumbs, and action areas
 * @param props - Page header configuration
 * @returns React element with page header
 */
function PageHeader(props: PageHeaderProps): React.ReactElement;

interface PageHeaderProps {
  /** Header title */
  title?: React.ReactNode;
  
  /** Header subtitle */
  subTitle?: React.ReactNode;
  
  /** Breadcrumb configuration */
  breadcrumb?: BreadcrumbProps;
  
  /** Back button configuration */
  onBack?: () => void;
  
  /** Tags to display */
  tags?: React.ReactElement | React.ReactElement[];
  
  /** Extra content area */
  extra?: React.ReactNode;
  
  /** Avatar/logo configuration */
  avatar?: AvatarProps;
  
  /** Footer content */
  footer?: React.ReactNode;
  
  /** Custom breadcrumb renderer */
  breadcrumbRender?: (props: any, defaultDom: React.ReactNode) => React.ReactNode;
  
  /** Child components */
  children?: React.ReactNode;
}

/**
 * Enhanced breadcrumb with automatic route calculation
 * @param props - Breadcrumb configuration
 * @returns React element with breadcrumb navigation
 */
function ProBreadcrumb(props: BreadcrumbProps): React.ReactElement;

/**
 * Enhanced page header with ProLayout integration
 * @param props - Enhanced page header configuration
 * @returns React element with enhanced page header
 */
function ProPageHeader(props: PageHeaderProps): React.ReactElement;

/**
 * Content wrapper with responsive grid layout
 * @param props - Grid content configuration
 * @returns React element with grid content wrapper
 */
function GridContent(props: GridContentProps): React.ReactElement;

interface GridContentProps {
  /** Content type affects max width */
  contentWidth?: 'Fluid' | 'Fixed';
  
  /** CSS class name */
  className?: string;
  
  /** Custom styles */
  style?: React.CSSProperties;
  
  /** Child components */
  children?: React.ReactNode;
}

import React from "react";
import { 
  PageHeader, 
  ProBreadcrumb, 
  GridContent 
} from "@ant-design/pro-layout";
import { Button, Tag, Space } from "antd";

// Standalone page header
function StandaloneHeader() {
  return (
    <PageHeader
      title="Product Details"
      subTitle="View and edit product information"
      breadcrumb={{
        routes: [
          { path: '/', breadcrumbName: 'Home' },
          { path: '/products', breadcrumbName: 'Products' },
          { path: '/products/123', breadcrumbName: 'Product #123' },
        ],
      }}
      tags={[<Tag color="blue">Active</Tag>, <Tag color="green">Featured</Tag>]}
      extra={[
        <Button key="edit">Edit</Button>,
        <Button key="delete" danger>Delete</Button>,
      ]}
      onBack={() => window.history.back()}
    >
      <div>Additional header content</div>
    </PageHeader>
  );
}

// Grid content wrapper
function ResponsiveContent() {
  return (
    <GridContent contentWidth="Fixed">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 16 }}>
        <Card>Card 1</Card>
        <Card>Card 2</Card>
        <Card>Card 3</Card>
      </div>
    </GridContent>
  );
}

/**
 * Page-level loading component with appropriate styling
 * @param props - Loading configuration
 * @returns React element with loading state
 */
function PageLoading(props?: { tip?: string }): React.ReactElement;

import React from "react";
import { PageLoading } from "@ant-design/pro-layout";

function LoadingExample() {
  return <PageLoading tip="Loading page content..." />;
}

<PageContainer
  title="Page Title"
  content="Page description"
  extraContent={<Button>Action</Button>}
>
  <Card>Main content</Card>
</PageContainer>

<PageContainer
  title="Multi-section Page"
  tabList={tabs}
  tabActiveKey={activeTab}
  onTabChange={setActiveTab}
>
  {renderTabContent()}
</PageContainer>

<PageContainer ghost>
  <GridContent contentWidth="Fluid">
    {/* Full-width content */}
  </GridContent>
</PageContainer>

<PageContainer loading={isLoading}>
  {/* Content shown when not loading */}
</PageContainer>