Create PageHeader component

webui/src/common/components/PageHeader/PageHeader.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './styles.sass';
+
+export const PageHeader = ({
+  title,
+  subtitle,
+  actions,
+  className = '',
+  ...rest
+}) => {
+  return (
+    <div className={`page-header ${className}`} {...rest}>
+      <div className="page-header-content">
+        {title && <h1 className="page-title">{title}</h1>}
+        {subtitle && <p className="page-subtitle">{subtitle}</p>}
+      </div>
+      {actions && <div className="page-header-actions">{actions}</div>}
+    </div>
+  );
+};

webui/src/common/components/PageHeader/index.js

@@ -0,0 +1 @@
+export { PageHeader as default } from './PageHeader.jsx';

webui/src/common/components/PageHeader/styles.sass

@@ -0,0 +1,37 @@
+.page-header
+  display: flex
+  align-items: flex-start
+  justify-content: space-between
+  gap: 1rem
+  margin-bottom: 2rem
+
+.page-header-content
+  flex: 1
+  min-width: 0
+
+.page-title
+  font-size: 1.8rem
+  font-weight: 700
+  color: var(--text)
+  margin-bottom: 0.25rem
+
+.page-subtitle
+  font-size: 0.9rem
+  color: var(--text-dim)
+  margin: 0
+
+.page-header-actions
+  flex-shrink: 0
+  display: flex
+  gap: 0.75rem
+  align-items: flex-start
+
+@media (max-width: 768px)
+  .page-header
+    flex-direction: column
+    align-items: stretch
+    text-align: center
+    gap: 1.5rem
+    
+  .page-header-actions
+    justify-content: center