refactor: reuse PostMeta components on single articles/pages

1 files changed, 24 insertions, 58 deletions

diff --git a/src/components/PostHeader/PostHeader.tsx b/src/components/PostHeader/PostHeader.tsx
index 3ee6705..e445b58 100644
--- a/src/components/PostHeader/PostHeader.tsx
+++ b/src/components/PostHeader/PostHeader.tsx
@@ -1,71 +1,37 @@
-import { t } from '@lingui/macro';
-import { Dates } from '@ts/types/app';
-import { ArticleAuthor } from '@ts/types/articles';
-import { ThematicPreview } from '@ts/types/taxonomies';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import PostMeta from '@components/PostMeta/PostMeta';
+import { ArticleMeta } from '@ts/types/articles';
+import { Cover } from '@ts/types/cover';
+import Image from 'next/image';
 import styles from './PostHeader.module.scss';
 
 const PostHeader = ({
-  author,
-  dates,
+  cover,
   intro,
   title,
-  thematics,
+  meta,
 }: {
-  author: ArticleAuthor;
-  dates: Dates;
+  cover?: Cover;
   intro: string;
+  meta?: ArticleMeta;
   title: string;
-  thematics: ThematicPreview[];
 }) => {
-  const { locale } = useRouter();
-
-  const getAuthor = () => {
-    return author.firstName
-      ? `${author.firstName} ${author.lastName}`
-      : author.name;
-  };
-
-  const getLocaleDate = (date: string) => {
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric',
-    };
-    return new Date(date).toLocaleDateString(locale, dateOptions);
-  };
-
-  const getThematics = () => {
-    return thematics.map((thematic) => {
-      return (
-        <dd key={thematic.id}>
-          <Link href={`/thematique/${thematic.slug}`}>
-            <a>{thematic.title}</a>
-          </Link>
-        </dd>
-      );
-    });
-  };
-
   return (
-    <header>
-      <h1>{title}</h1>
-      <ul className={styles.meta}>
-        <li>{t`Written by ${getAuthor()} on ${getLocaleDate(
-          dates.publication
-        )}.`}</li>
-        <li>{t`Last update on ${getLocaleDate(dates.update)}.`}</li>
-        {thematics.length > 0 && (
-          <li>
-            <dl>
-              <dt className={styles.label}>{t`Posted in:`}</dt>
-              {getThematics()}
-            </dl>
-          </li>
-        )}
-      </ul>
-      <div dangerouslySetInnerHTML={{ __html: intro }}></div>
+    <header className={styles.wrapper}>
+      <div className={styles.body}>
+        <h1 className={styles.title}>
+          {cover && (
+            <span className={styles.cover}>
+              <Image src={cover.sourceUrl} alt={cover.altText} layout="fill" />
+            </span>
+          )}
+          {title}
+        </h1>
+        {meta && <PostMeta mode="single" meta={meta} />}
+        <div
+          className={styles.intro}
+          dangerouslySetInnerHTML={{ __html: intro }}
+        ></div>
+      </div>
     </header>
   );
 };