panelheader

2025-10-31 13:12:09 +01:00
parent 6b4a4af5f1
commit 321b0d84ae
6 changed files with 305 additions and 202 deletions
@@ -0,0 +1,53 @@
+import React from 'react';
+
+const composeClassName = (base, extra) => (extra ? `${base} ${extra}` : base);
+
+const PanelHeader = ({
+  className = '',
+  leading = null,
+  title = null,
+  titleTag = 'h2',
+  titleProps = {},
+  actions = null,
+}) => {
+  const headerClassName = composeClassName('panel-header', className);
+
+  const renderTitle = () => {
+    if (title == null) {
+      return null;
+    }
+
+    if (React.isValidElement(title)) {
+      if (title.type === React.Fragment) {
+        return (
+          <span className="panel-header__title" {...titleProps}>
+            {title}
+          </span>
+        );
+      }
+
+      const mergedClassName = composeClassName('panel-header__title', title.props.className || '');
+      return React.cloneElement(title, {
+        ...titleProps,
+        className: mergedClassName,
+      });
+    }
+
+    const HeadingTag = titleTag;
+    return (
+      <HeadingTag className="panel-header__title" {...titleProps}>
+        {title}
+      </HeadingTag>
+    );
+  };
+
+  return (
+    <div className={headerClassName}>
+      {leading ? <div className="panel-header__leading">{leading}</div> : null}
+      {renderTitle()}
+      {actions ? <div className="panel-header__actions">{actions}</div> : null}
+    </div>
+  );
+};
+
+export default PanelHeader;