Add the PageHeader component.

source/components/exports.ts

@@ -0,0 +1 @@
+export * from "./page-header/page-header.js";

source/components/page-header/page-header.scss

@@ -0,0 +1,45 @@
+.page-header {
+  --font-size: 3rem;
+
+  &.full-page {
+    --font-size: 5rem;
+
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    justify-content: center;
+    width: 100vw;
+
+    h1 {
+      align-items: center;
+      border-bottom: 2px solid var(--foreground);
+      display: flex;
+      justify-content: center;
+      padding: var(--spacing-large);
+      width: 75vw;
+    }
+
+    .subtitle {
+      border-left: unset;
+      margin-top: var(--spacing-large);
+    }
+  }
+
+  h1 {
+    align-items: center;
+    display: flex;
+    font-size: var(--font-size);
+  }
+
+  .logo {
+    aspect-ratio: 1;
+    margin-right: var(--spacing-medium);
+    width: var(--font-size);
+  }
+
+  .subtitle {
+    border-left: 2px solid var(--foreground);
+    margin-top: var(--spacing-medium);
+  }
+}

source/components/page-header/page-header.tsx

@@ -0,0 +1,38 @@
+import "./page-header.scss";
+
+type Props = {
+  fullPage?: boolean;
+  logoAlt?: string;
+  logoSrc?: string;
+  subtitle?: string;
+  title?: string;
+};
+
+export function PageHeader(props: Props): JsxElement {
+  const {fullPage, logoAlt, logoSrc, subtitle, title} = props;
+
+  let logoElement: OptionalJsxElement;
+  if (logoAlt !== undefined && logoSrc !== undefined) {
+    logoElement = <img class="logo" alt={logoAlt} src={logoSrc} />;
+  }
+
+  let subtitleElement: OptionalJsxElement;
+  if (subtitle !== undefined) {
+    subtitleElement = <p class="subtitle">{subtitle}</p>;
+  }
+
+  const headerClasses: string[] = ["page-header"];
+  if (fullPage === true) {
+    headerClasses.push("full-page");
+  }
+
+  return (
+    <header class={headerClasses.join(" ")}>
+      <h1>
+        {logoElement}
+        {title}
+      </h1>
+      {subtitleElement}
+    </header>
+  );
+}