chore: add a PageHeader component

1 files changed, 49 insertions, 0 deletions

diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
new file mode 100644
index 0000000..174e246
--- /dev/null
+++ b/src/components/molecules/layout/page-header.tsx
@@ -0,0 +1,49 @@
+import Heading from '@components/atoms/headings/heading';
+import styles from './page-header.module.scss';
+import Meta, { type MetaMap } from './meta';
+import { FC } from 'react';
+
+export type PageHeaderProps = {
+  /**
+   * Set additional classnames to the header element.
+   */
+  className?: string;
+  /**
+   * The page introduction.
+   */
+  intro?: string;
+  /**
+   * The page metadata.
+   */
+  meta?: MetaMap;
+  /**
+   * The page title.
+   */
+  title: string;
+};
+
+/**
+ * PageHeader component
+ *
+ * Render a header element with page title, meta and intro.
+ */
+const PageHeader: FC<PageHeaderProps> = ({
+  className = '',
+  intro,
+  meta,
+  title,
+}) => {
+  return (
+    <header className={`${styles.wrapper} ${className}`}>
+      <div className={styles.body}>
+        <Heading level={1} className={styles.title} withMargin={false}>
+          {title}
+        </Heading>
+        {meta && <Meta data={meta} className={styles.meta} layout="inline" />}
+        {intro && <div>{intro}</div>}
+      </div>
+    </header>
+  );
+};
+
+export default PageHeader;