feat: add headings to page contents

nr2f1 · Jan 18, 2025 · 7c9ea47 · 7c9ea47
1 parent c7e3cdf
commit 7c9ea47
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 49 deletions.
diff --git a/website/src/app/[lang]/register-a-patient/page-body.tsx b/website/src/app/[lang]/register-a-patient/page-body.tsx
@@ -95,11 +95,17 @@ const RegisterPageBody: React.FC<RegisterPageBodyProps> = async ({ lang }) => {
     return null;
   }
 
+  const headings = [
+    registerWithUsHeading?.content ?? '',
+    registerPatientRegistryHeading?.content ?? '',
+    registerClinicalIdHeading?.content ?? '',
+  ];
+
   return (
     <div className={styles['page-layout']}>
       <div className={styles['page-layout__row']}>
         <aside className={styles['page-contents']}>
-          <PageContents lang={lang} />
+          <PageContents lang={lang} headings={headings} />
         </aside>
         <article className={styles['page-body']}>
           {documentToReactComponents(intro?.content?.json)}

diff --git a/website/src/components/page-contents/index.tsx b/website/src/components/page-contents/index.tsx
@@ -3,7 +3,11 @@ import styles from './index.module.scss';
 
 import type { AvailableLocale, LocalisedString } from '@i18n/locales';
 
-interface PageContentsProps {
+interface HeadingsProps {
+  headings: string[];
+}
+
+interface PageContentsProps extends HeadingsProps {
   lang: AvailableLocale;
 }
 
@@ -14,62 +18,32 @@ const summary: LocalisedString = {
   de: 'Seiteninhalt',
 };
 
-const PageContents: React.FC<PageContentsProps> = ({ lang }) => {
+const Headings: React.FC<HeadingsProps> = ({ headings }) => {
+  return (
+    <nav>
+      <ul>
+        {headings.map((heading) => (
+          <li key={crypto.randomUUID()}>
+            <a href={`#${createHashLink(heading)}`}>{heading}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+const PageContents: React.FC<PageContentsProps> = ({ lang, headings }) => {
   const summaryText = summary[lang];
 
   return (
     <div className={styles['page-contents']}>
       <details>
         <summary>{summaryText}</summary>
-        <nav>
-          <ul>
-            <li>
-              <a href={`#${createHashLink('Register with us')}`}>
-                Register with us
-              </a>
-            </li>
-            <li>
-              <a
-                href={`#${createHashLink('Register with the NR2F1 Patient Registry')}`}
-              >
-                Register with the NR2F1 Patient Registry
-              </a>
-            </li>
-            <li>
-              <a
-                href={`#${createHashLink('Register for a Clinical Research ID')}`}
-              >
-                Register for a Clinical Research ID
-              </a>
-            </li>
-          </ul>
-        </nav>
+        <Headings headings={headings} />
       </details>
       <div>
         <h3>{summaryText}</h3>
-        <nav>
-          <ul>
-            <li>
-              <a href={`#${createHashLink('Register with us')}`}>
-                Register with us
-              </a>
-            </li>
-            <li>
-              <a
-                href={`#${createHashLink('Register with the NR2F1 Patient Registry')}`}
-              >
-                Register with the NR2F1 Patient Registry
-              </a>
-            </li>
-            <li>
-              <a
-                href={`#${createHashLink('Register for a Clinical Research ID')}`}
-              >
-                Register for a Clinical Research ID
-              </a>
-            </li>
-          </ul>
-        </nav>
+        <Headings headings={headings} />
       </div>
     </div>
   );