Added PageComponents

src/components/post/Header/SimpleHeader.astro

@@ -1,17 +1,28 @@
 ---
 type Props = {
   title: string
-  /** Small label above the title: "Page", "Tag". */
   eyebrow?: string
   standfirst?: string
+  count?: number
 }
 
-const { title, eyebrow, standfirst } = Astro.props
+const { title, eyebrow, standfirst, count } = Astro.props
 ---
 
-<header class="header">
-  {eyebrow && <p class="eyebrow">{eyebrow}</p>}
-  <h1 class="title">{title}</h1>
-  {standfirst && <p class="standfirst">{standfirst}</p>}
-  <slot />
+<header class="simple-header dark">
+  <div class="simple-header__inner">
+    <div class="simple-header__text">
+      {eyebrow && <p class="simple-header__eyebrow">{eyebrow}</p>}
+      <h1 class="simple-header__title">{title}</h1>
+      {standfirst && <p class="simple-header__standfirst">{standfirst}</p>}
+    </div>
+    {count !== undefined && (
+      <p class="simple-header__count">
+        <span aria-hidden="true">{String(count).padStart(2, '0')}</span>
+        <span class="simple-header__hidden">
+          {count} {count === 1 ? 'entry' : 'entries'}
+        </span>
+      </p>
+    )}
+  </div>
 </header>