refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 67 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..6759c7f
--- /dev/null
+++ b/src/components/molecules/layout/page-header.tsx
@@ -0,0 +1,67 @@
+import Heading from '@components/atoms/headings/heading';
+import { FC, ReactNode } from 'react';
+import Meta, { type MetaData } from './meta';
+import styles from './page-header.module.scss';
+
+export type PageHeaderProps = {
+  /**
+   * Set additional classnames to the header element.
+   */
+  className?: string;
+  /**
+   * The page introduction.
+   */
+  intro?: string | JSX.Element;
+  /**
+   * The page metadata.
+   */
+  meta?: MetaData;
+  /**
+   * The page title.
+   */
+  title: ReactNode;
+};
+
+/**
+ * PageHeader component
+ *
+ * Render a header element with page title, meta and intro.
+ */
+const PageHeader: FC<PageHeaderProps> = ({
+  className = '',
+  intro,
+  meta,
+  title,
+}) => {
+  const getIntro = () => {
+    return typeof intro === 'string' ? (
+      <div
+        className={styles.intro}
+        dangerouslySetInnerHTML={{ __html: intro }}
+      />
+    ) : (
+      <div className={styles.intro}>{intro}</div>
+    );
+  };
+
+  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="column"
+            itemsLayout="inline"
+          />
+        )}
+        {intro && getIntro()}
+      </div>
+    </header>
+  );
+};
+
+export default PageHeader;