From 42a036a84c131ffc2befa6c6cb460fffddce03dc Mon Sep 17 00:00:00 2001
From: Mathias Wagner <m.wagner@itlsoftware.de>
Date: Tue, 9 Sep 2025 13:43:59 +0200
Subject: [PATCH] Create PageHeader component

---
 .../components/PageHeader/PageHeader.jsx      | 20 ++++++++++
 .../src/common/components/PageHeader/index.js |  1 +
 .../common/components/PageHeader/styles.sass  | 37 +++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 webui/src/common/components/PageHeader/PageHeader.jsx
 create mode 100644 webui/src/common/components/PageHeader/index.js
 create mode 100644 webui/src/common/components/PageHeader/styles.sass

diff --git a/webui/src/common/components/PageHeader/PageHeader.jsx b/webui/src/common/components/PageHeader/PageHeader.jsx
new file mode 100644
index 0000000..fc1dc63
--- /dev/null
+++ b/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>
+  );
+};
\ No newline at end of file
diff --git a/webui/src/common/components/PageHeader/index.js b/webui/src/common/components/PageHeader/index.js
new file mode 100644
index 0000000..48f7ba0
--- /dev/null
+++ b/webui/src/common/components/PageHeader/index.js
@@ -0,0 +1 @@
+export { PageHeader as default } from './PageHeader.jsx';
\ No newline at end of file
diff --git a/webui/src/common/components/PageHeader/styles.sass b/webui/src/common/components/PageHeader/styles.sass
new file mode 100644
index 0000000..4c7e539
--- /dev/null
+++ b/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
\ No newline at end of file