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 ( +
+
+ {title &&

{title}

} + {subtitle &&

{subtitle}

} +
+ {actions &&
{actions}
} +
+ ); +}; \ 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