Unify page layouts, compact headers and shared UI styling

2026-09-06 19:52:39 +12:00
parent 4d67567d4c
commit dec1dd902c
27 changed files with 480 additions and 179 deletions
@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+
+type PageHeadingProps = {
+  title: string
+  description?: string
+  eyebrow?: string
+  leading?: ReactNode
+  actions?: ReactNode
+}
+
+/** A flat, shared page title. Panels belong to the content below it. */
+export default function PageHeading({ title, description, eyebrow, leading, actions }: PageHeadingProps) {
+  return (
+    <header className="page-heading">
+      <div className="page-heading-main">
+        {leading && <div className="page-heading-leading">{leading}</div>}
+        <div className="page-heading-copy">
+          {eyebrow && <span className="page-heading-eyebrow">{eyebrow}</span>}
+          <h1>{title}</h1>
+          {description && <p>{description}</p>}
+        </div>
+      </div>
+      {actions && <div className="page-heading-actions">{actions}</div>}
+    </header>
+  )
+}