custom post header

src/components/PostHeader/PostHeader.module.scss

@@ -0,0 +1,54 @@
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
+
+.header {
+  align-items: baseline;
+  background: #fff;
+  border-bottom: 1px solid #808080;
+  color: #000;
+  display: flex;
+  height: 50px;
+  justify-content: space-between;
+  margin:auto;
+  max-width: $layout-post-width;
+  position: sticky;
+  top:0;
+  z-index: 999;
+
+  .title {
+    font-size: $typographic-base-font-size * 1.125 !important;
+    font-weight: 600;
+    line-height: 50px !important;
+    @include line-height(1.125);
+    @include margin(0.5, 0, 0.5, 0);
+
+    .link {
+      color: $color-base;
+
+      &:hover,
+      &:focus {
+        color: $color-base;
+      }
+    }
+  }
+
+  .name {
+    color: #000;
+  }
+}
+
+@media only screen and (max-device-width: 350px){
+  .surname{
+    display: none;
+  }
+}
+
+.photo {
+  background-clip: padding-box;
+  border-radius: 50%;
+  display: inline-block;
+  height: 40px;
+  margin-top: 5px;
+  width: 40px;
+  @include margin-bottom(0);
+}

src/components/PostHeader/PostHeader.tsx

@@ -0,0 +1,27 @@
+import { Image } from "@/components/Image";
+import { Link } from "gatsby";
+import React, { FunctionComponent } from "react";
+import * as styles from "./PostHeader.module.scss";
+
+type Props = { author: { name: string; photo: string } };
+
+export const PostHeader: FunctionComponent<Props> = ({ author }) => {
+  return (
+    <div className={styles.header}>
+      <span>
+        <Image alt={author.name} path={author.photo} className={styles.photo} />
+        <span className={styles.title}>
+          <Link className={styles.name} to="/">
+            Rick <span className={styles.surname}>van Lieshout</span>
+          </Link>
+        </span>
+      </span>
+
+      <span>
+        <Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
+          ↩ All articles
+        </Link>
+      </span>
+    </div>
+  );
+};