add support for page sections on generic pages

web/src/components/blocks/PageSection.tsx

@@ -1,14 +1,55 @@
+import { PageSectionBlock as PageSectionBlockType } from "@/gql/graphql";
 import styles from "./pageSection.module.scss";
+import { Blocks } from "./Blocks";
+import slugify from "@sindresorhus/slugify";
+
+export const PageSectionBlock = ({
+  block,
+}: {
+  block: PageSectionBlockType;
+}) => {
+  // TODO: add icon selection to model
+  // TODO: there's a block.backgroundColor
+
+  const anchor = slugify(block.title);
 
-export const PageSection = ({ heading }: any) => {
   return (
-    <section className={styles.pageSection}>
+    <section className={styles.pageSection} id={anchor}>
       <div className={styles.sectionHeader}>
         <div className={styles.icon}>
           <img src="/assets/icons/neufneuf.svg" />
         </div>
-        <h1>{heading}</h1>
+        <h1>{block.title}</h1>
       </div>
+      <Blocks blocks={block.body} />
     </section>
   );
 };
+
+export const PageSectionNavigationBlock = ({
+  sections,
+}: {
+  sections: PageSectionBlockType[];
+}) => {
+  if (!sections.length) {
+    return <></>;
+  }
+  return (
+    <div className="anchorLinks">
+      <span className="suphead">Hopp til</span>
+      <ul>
+        {sections.map((section) => {
+          const anchor = slugify(section.title);
+
+          return (
+            <li key={anchor}>
+              <a href={`#${anchor}`} className="button">
+                {section.title}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};