1  import React from 'react';
 2  import { Typography, Space, theme } from 'antd';
 3  
 4  interface PageHeaderProps {
 5    /** Page title text */
 6    title: string;
 7    /** Optional icon before the title */
 8    icon?: React.ReactNode;
 9    /** Optional actions rendered on the right */
10    actions?: React.ReactNode;
11  }
12  
13  /**
14   * Consistent page header with title + optional icon and action buttons.
15   */
16  const PageHeader: React.FC<PageHeaderProps> = ({ title, icon, actions }) => {
17    const { token } = theme.useToken();
18  
19    return (
20      <div
21        style={{
22          marginBottom: 16,
23          display: 'flex',
24          justifyContent: 'space-between',
25          alignItems: 'center',
26        }}
27      >
28        <Typography.Title level={4} style={{ margin: 0, color: token.colorText }}>
29          {icon && (
30            <span style={{ marginRight: 8, color: token.colorPrimary }}>{icon}</span>
31          )}
32          {title}
33        </Typography.Title>
34        {actions && <Space>{actions}</Space>}
35      </div>
36    );
37  };
38  
39  export default PageHeader;