Custom header title

components/OrganizedContent/Header.tsx

@@ -5,16 +5,17 @@ import { Image } from "@/components/Image";
 import styles from "./Header.module.css";
 
 export interface Props {
+  title: string;
   image: string;
   children: ReactNode;
 }
 
-export function Header({ image, children }: Props) {
+export function Header({ title, image, children }: Props) {
   return (
     <main className={styles.page}>
       <header className={styles.headerContainer}>
         <Image src={image} className={styles.headerImage} />
-        <h1 className={styles.header}>Constitution</h1>
+        <h1 className={styles.header}>{title}</h1>
       </header>
       {children}
     </main>

components/OrganizedContent/ReadAll.tsx

@@ -24,11 +24,12 @@ export interface Props {
 
 export interface Options {
   pagePath: string;
+  title: string;
   image: string;
   link?: ComponentType<LinkProps>;
 }
 
-export function createReadAllPage({ image, pagePath, link }: Options) {
+export function createReadAllPage({ title, image, pagePath, link }: Options) {
   const Link = link ?? createLink(pagePath);
 
   return function Page({ sections }: Props) {
@@ -43,7 +44,7 @@ export function createReadAllPage({ image, pagePath, link }: Options) {
     );
 
     return (
-      <Header image={image}>
+      <Header title={title} image={image}>
         <OrganizedContent
           id={readAllSection.section.id}
           sections={[

components/OrganizedContent/Section.tsx

@@ -21,17 +21,18 @@ export interface Props {
 }
 
 export interface Options {
+  title: string;
   pagePath: string;
   image: string;
   link?: ComponentType<LinkProps>;
 }
 
-export function createSectionPage({ image, pagePath, link }: Options) {
+export function createSectionPage({ title, image, pagePath, link }: Options) {
   const Link = link ?? createLink(pagePath);
 
   return function Page(this: void, { content, sections, current }: Props) {
     return (
-      <Header image={image}>
+      <Header title={title} image={image}>
         <OrganizedContent
           sections={sections}
           id={sections[current].id}

pages/about/constitution.tsx

@@ -6,6 +6,7 @@ import { createReadAllGetStaticProps } from "@/components/OrganizedContent/stati
 export const CONSTITUTION_PAGE = path.join("about", "constitution");
 
 export default createReadAllPage({
+  title: "Constitution",
   image: "images/constitution.svg",
   pagePath: CONSTITUTION_PAGE,
 });

pages/about/constitution/[section].tsx

@@ -7,6 +7,7 @@ import {
 import { CONSTITUTION_PAGE } from "../constitution";
 
 export default createSectionPage({
+  title: "Constitution",
   image: "images/constitution.svg",
   pagePath: CONSTITUTION_PAGE,
 });