From d1be264bc547c2941efb088995c177799b19932c Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Fri, 9 Aug 2024 02:17:15 +0200
Subject: [PATCH] make separate component for pageContent

---
 web/src/app/[...url]/page.tsx                 |   4 +-
 web/src/app/aktuelt/[slug]/page.tsx           |   6 +-
 web/src/app/arrangementer/[slug]/page.tsx     |   6 +-
 web/src/app/foreninger/[slug]/page.tsx        |   6 +-
 web/src/app/foreninger/page.tsx               |   4 +-
 web/src/app/kontakt/page.tsx                  |   4 +-
 web/src/app/lokaler/[slug]/page.tsx           |   4 +-
 web/src/app/lokaler/page.tsx                  |   4 +-
 web/src/app/utleie/page.tsx                   |   4 +-
 web/src/components/blocks/Blocks.tsx          | 116 +++++++++---------
 .../components/blocks/ImageSliderBlock.tsx    |   4 +-
 .../blocks/imageSliderBlock.module.scss       |   8 +-
 web/src/components/general/PageContent.tsx    |  10 ++
 .../components/general/accordion.module.scss  |   4 -
 .../general/pageContent.module.scss           |   3 +
 15 files changed, 97 insertions(+), 90 deletions(-)
 create mode 100644 web/src/components/general/PageContent.tsx
 create mode 100644 web/src/components/general/pageContent.module.scss

diff --git a/web/src/app/[...url]/page.tsx b/web/src/app/[...url]/page.tsx
index 0d39966..c363378 100644
--- a/web/src/app/[...url]/page.tsx
+++ b/web/src/app/[...url]/page.tsx
@@ -1,9 +1,9 @@
 import { graphql } from "@/gql";
 import { GenericFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { Blocks } from "@/components/blocks/Blocks";
 import { notFound } from "next/navigation";
 import { PageHeader } from "@/components/general/PageHeader";
+import { PageContent } from "@/components/general/PageContent";
 
 export const dynamicParams = false;
 
@@ -76,7 +76,7 @@ export default async function Page({ params }: { params: { url: string[] } }) {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={page.title} lead={page.lead} />
-      <Blocks blocks={page.body} />
+      <PageContent blocks={page.body} />
     </main>
   );
 }
diff --git a/web/src/app/aktuelt/[slug]/page.tsx b/web/src/app/aktuelt/[slug]/page.tsx
index a8fd4ed..1ee4362 100644
--- a/web/src/app/aktuelt/[slug]/page.tsx
+++ b/web/src/app/aktuelt/[slug]/page.tsx
@@ -1,7 +1,7 @@
 import { getClient } from "@/app/client";
-import { Blocks } from "@/components/blocks/Blocks";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
 import { ImageFigure } from "@/components/general/Image";
+import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
 import { formatDate, formatExtendedDateTime } from "@/lib/date";
@@ -71,9 +71,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
           />
         )}
       </section>
-      <section className="pageContent">
-        <Blocks blocks={news.body} />
-      </section>
+      <PageContent blocks={news.body} />
     </main>
   );
 }
diff --git a/web/src/app/arrangementer/[slug]/page.tsx b/web/src/app/arrangementer/[slug]/page.tsx
index 30a0510..925e46d 100644
--- a/web/src/app/arrangementer/[slug]/page.tsx
+++ b/web/src/app/arrangementer/[slug]/page.tsx
@@ -1,8 +1,8 @@
 import { getClient } from "@/app/client";
-import { Blocks } from "@/components/blocks/Blocks";
 import { EventDetails } from "@/components/events/EventDetails";
 import { EventHeader } from "@/components/events/EventHeader";
 import { BgPig } from "@/components/general/BgPig";
+import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { EventFragment } from "@/gql/graphql";
 import { getEventPig } from "@/lib/event";
@@ -55,9 +55,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
       <main className="site-main" id="main">
         <EventHeader event={event} />
         <EventDetails event={event} />
-        <section className="pageContent">
-          <Blocks blocks={event.body} />
-        </section>
+        <PageContent blocks={event.body} />
       </main>
       {eventPig && <BgPig type={eventPig} color="white" />}
     </>
diff --git a/web/src/app/foreninger/[slug]/page.tsx b/web/src/app/foreninger/[slug]/page.tsx
index a65976c..abaaafb 100644
--- a/web/src/app/foreninger/[slug]/page.tsx
+++ b/web/src/app/foreninger/[slug]/page.tsx
@@ -1,8 +1,8 @@
 import { getClient } from "@/app/client";
-import { Blocks } from "@/components/blocks/Blocks";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
 import Icon from "@/components/general/Icon";
 import { Image } from "@/components/general/Image";
+import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { AssociationFragment } from "@/gql/graphql";
 import Link from "next/link";
@@ -73,9 +73,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
           />
         )}
       </section>
-      <section className="pageContent">
-        <Blocks blocks={association.body} />
-      </section>
+      <PageContent blocks={association.body} />
     </main>
   );
 }
diff --git a/web/src/app/foreninger/page.tsx b/web/src/app/foreninger/page.tsx
index 97ae634..180bc7f 100644
--- a/web/src/app/foreninger/page.tsx
+++ b/web/src/app/foreninger/page.tsx
@@ -2,9 +2,9 @@ import { graphql } from "@/gql";
 import { AssociationFragment, AssociationIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { AssociationList } from "@/components/associations/AssociationList";
-import { Blocks } from "@/components/blocks/Blocks";
 import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
+import { PageContent } from "@/components/general/PageContent";
 
 const AssociationIndexDefinition = graphql(`
   fragment AssociationIndex on AssociationIndex {
@@ -60,7 +60,7 @@ export default async function Page() {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />
-      {index.body && <Blocks blocks={index.body} />}
+      {index.body && <PageContent blocks={index.body} />}
       <AssociationList associations={associations} heading="Foreninger og utvalg" />
     </main>
   );
diff --git a/web/src/app/kontakt/page.tsx b/web/src/app/kontakt/page.tsx
index 666ad24..6133e15 100644
--- a/web/src/app/kontakt/page.tsx
+++ b/web/src/app/kontakt/page.tsx
@@ -1,8 +1,8 @@
 import { graphql } from "@/gql";
 import { ContactIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { Blocks } from "@/components/blocks/Blocks";
 import { PageHeader } from "@/components/general/PageHeader";
+import { PageContent } from "@/components/general/PageContent";
 
 const ContactIndexDefinition = graphql(`
   fragment ContactIndex on ContactIndex {
@@ -32,7 +32,7 @@ export default async function Page() {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />
-      {index.body && <Blocks blocks={index.body} />}
+      {index.body && <PageContent blocks={index.body} />}
     </main>
   );
 }
diff --git a/web/src/app/lokaler/[slug]/page.tsx b/web/src/app/lokaler/[slug]/page.tsx
index e865894..03d58d2 100644
--- a/web/src/app/lokaler/[slug]/page.tsx
+++ b/web/src/app/lokaler/[slug]/page.tsx
@@ -1,8 +1,8 @@
 import { getClient } from "@/app/client";
-import { Blocks } from "@/components/blocks/Blocks";
 import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
 import { Image } from "@/components/general/Image";
+import { PageContent } from "@/components/general/PageContent";
 import { NeufMap } from "@/components/venues/NeufMap";
 import { VenueInfo } from "@/components/venues/VenueInfo";
 import { graphql } from "@/gql";
@@ -107,7 +107,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
         <Breadcrumb link="/utleie" text="Lokale" />
         <h1 className="page-title">{venue.title}</h1>
       </div>
-      <Blocks blocks={venue.body} />
+      <PageContent blocks={venue.body} />
       <VenueInfo venue={venue} />
       <NeufMap venueSlug={venue.slug} />
     </main>
diff --git a/web/src/app/lokaler/page.tsx b/web/src/app/lokaler/page.tsx
index 431b745..b5045c9 100644
--- a/web/src/app/lokaler/page.tsx
+++ b/web/src/app/lokaler/page.tsx
@@ -3,7 +3,7 @@ import { VenueFragment, VenueIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { VenueList } from "@/components/venues/VenueList";
 import { PageHeader } from "@/components/general/PageHeader";
-import { Blocks } from "@/components/blocks/Blocks";
+import { PageContent } from "@/components/general/PageContent";
 
 const VenueIndexDefinition = graphql(`
   fragment VenueIndex on VenueIndex {
@@ -64,7 +64,7 @@ export default async function Page() {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />
-      <Blocks blocks={index.body} />
+      <PageContent blocks={index.body} />
       <VenueList venues={venues} />
     </main>
   );
diff --git a/web/src/app/utleie/page.tsx b/web/src/app/utleie/page.tsx
index dd52f7c..a7314bb 100644
--- a/web/src/app/utleie/page.tsx
+++ b/web/src/app/utleie/page.tsx
@@ -4,7 +4,7 @@ import { getClient } from "@/app/client";
 import { VenueList } from "@/components/venues/VenueList";
 import { PageHeader } from "@/components/general/PageHeader";
 import { BgPig } from "@/components/general/BgPig";
-import { Blocks } from "@/components/blocks/Blocks";
+import { PageContent } from "@/components/general/PageContent";
 
 const VenueRentalIndexDefinition = graphql(`
   fragment VenueRentalIndex on VenueRentalIndex {
@@ -42,7 +42,7 @@ export default async function Page() {
     <>
       <main className="site-main" id="main">
         <PageHeader heading={index.title} lead={index.lead} />
-        {index.body && <Blocks blocks={index.body} />}
+        {index.body && <PageContent blocks={index.body} />}
         <VenueList venues={bookableVenues} heading="Våre lokaler" />
       </main>
       <BgPig type="key" />
diff --git a/web/src/components/blocks/Blocks.tsx b/web/src/components/blocks/Blocks.tsx
index cfc367c..ff017dd 100644
--- a/web/src/components/blocks/Blocks.tsx
+++ b/web/src/components/blocks/Blocks.tsx
@@ -13,68 +13,64 @@ import { ContactEntityBlock } from "./ContactEntityBlock";
 import { NeufAddressSectionBlock } from "./NeufAddressSectionBlock";
 import { OpeningHoursSectionBlock } from "./OpeningHoursSectionBlock";
 
-export const Blocks = ({ blocks }: any) => {
+export const Blocks = ({ blocks, pageContent }: { blocks: any, pageContent?: boolean }) => {
   const sections = blocks.filter(
     (block: any) => block?.__typename === "PageSectionBlock"
   );
 
-  return (
-    <div className="blockContent">
-      {blocks.map((block: any) => {
-        switch (block?.blockType) {
-          case "RichTextBlock":
-            return <RichTextBlock block={block} />;
-            break;
-          case "ImageWithTextBlock":
-            return <ImageWithTextBlock block={block} />;
-            break;
-            case "EmbedBlock":
-              return <EmbedBlock block={block} />;
-              break;
-          case "ImageSliderBlock":
-            return <ImageSliderBlock block={block} />;
-            break;
-          case "HorizontalRuleBlock":
-            return <HorizontalRuleBlock block={block} />;
-            break;
-          case "FeaturedBlock":
-            return <FeaturedBlock block={block} />;
-            break;
-          case "AccordionBlock":
-            return <AccordionBlock block={block} />;
-            break;
-          case "FactBoxBlock":
-            return <FactBoxBlock block={block} />;
-            break;
-          case "PageSectionBlock":
-            return <PageSectionBlock block={block} />;
-            break;
-          case "PageSectionNavigationBlock":
-            return <PageSectionNavigationBlock sections={sections} />;
-            break;
-          case "ContactSectionBlock":
-            return <ContactSectionBlock block={block} />;
-            break;
-          case "ContactSubsectionBlock":
-            return <ContactSubsectionBlock block={block} />;
-            break;
-          case "ContactListBlock":
-            return <ContactListBlock block={block} />;
-            break;
-          case "ContactEntityBlock":
-            return <ContactEntityBlock block={block} />;
-            break;
-          case "NeufAddressSectionBlock":
-            return <NeufAddressSectionBlock />;
-            break;
-          case "OpeningHoursSectionBlock":
-            return <OpeningHoursSectionBlock />;
-            break;
-          default:
-            console.log("unsupported block", block);
-            return <div>Unsupported block type {block?.blockType}</div>;
-        }
-      })}
-    </div>
-  )
+  return blocks.map((block: any) => {
+    switch (block?.blockType) {
+      case "RichTextBlock":
+        return <RichTextBlock block={block} />;
+        break;
+      case "ImageWithTextBlock":
+        return <ImageWithTextBlock block={block} />;
+        break;
+        case "EmbedBlock":
+          return <EmbedBlock block={block} />;
+          break;
+      case "ImageSliderBlock":
+        return <ImageSliderBlock block={block} pageContent />;
+        break;
+      case "HorizontalRuleBlock":
+        return <HorizontalRuleBlock block={block} />;
+        break;
+      case "FeaturedBlock":
+        return <FeaturedBlock block={block} />;
+        break;
+      case "AccordionBlock":
+        return <AccordionBlock block={block} />;
+        break;
+      case "FactBoxBlock":
+        return <FactBoxBlock block={block} />;
+        break;
+      case "PageSectionBlock":
+        return <PageSectionBlock block={block} />;
+        break;
+      case "PageSectionNavigationBlock":
+        return <PageSectionNavigationBlock sections={sections} />;
+        break;
+      case "ContactSectionBlock":
+        return <ContactSectionBlock block={block} />;
+        break;
+      case "ContactSubsectionBlock":
+        return <ContactSubsectionBlock block={block} />;
+        break;
+      case "ContactListBlock":
+        return <ContactListBlock block={block} />;
+        break;
+      case "ContactEntityBlock":
+        return <ContactEntityBlock block={block} />;
+        break;
+      case "NeufAddressSectionBlock":
+        return <NeufAddressSectionBlock />;
+        break;
+      case "OpeningHoursSectionBlock":
+        return <OpeningHoursSectionBlock />;
+        break;
+      default:
+        console.log("unsupported block", block);
+        return <div>Unsupported block type {block?.blockType}</div>;
+    }
+  });
 };
diff --git a/web/src/components/blocks/ImageSliderBlock.tsx b/web/src/components/blocks/ImageSliderBlock.tsx
index bd36d67..cbd7638 100644
--- a/web/src/components/blocks/ImageSliderBlock.tsx
+++ b/web/src/components/blocks/ImageSliderBlock.tsx
@@ -14,12 +14,14 @@ import "./swiper.scss";
 export const ImageSliderBlock = ({
   block,
   hero,
+  pageContent
 }: {
   block: ImageSliderBlockType | any;
   hero?: boolean;
+  pageContent?: boolean;
 }) => {
   return (
-    <div className={styles.imageSliderBlock} data-hero={hero}>
+    <div className={styles.imageSliderBlock} data-hero={hero} data-pageContent={pageContent}>
       <Swiper
         pagination={{
           type: "fraction",
diff --git a/web/src/components/blocks/imageSliderBlock.module.scss b/web/src/components/blocks/imageSliderBlock.module.scss
index b04ba45..2ef9d45 100644
--- a/web/src/components/blocks/imageSliderBlock.module.scss
+++ b/web/src/components/blocks/imageSliderBlock.module.scss
@@ -43,7 +43,13 @@
   }
 
   &:last-child {
-    margin-bottom: calc(var(--spacing-section-bottom)*-1);
+    margin-bottom: 0;
+  }
+
+  &[data-pageContent]{
+    &:last-child {
+      margin-bottom: calc(var(--spacing-section-bottom)*-1);
+    }
   }
 
   &[data-hero] {
diff --git a/web/src/components/general/PageContent.tsx b/web/src/components/general/PageContent.tsx
new file mode 100644
index 0000000..bf19ba8
--- /dev/null
+++ b/web/src/components/general/PageContent.tsx
@@ -0,0 +1,10 @@
+import { Blocks } from "@/components/blocks/Blocks";
+import styles from './pageContent.module.scss';
+
+export const PageContent = ({ blocks }: any) => {
+  return (
+    <div className={styles.pageContent}>
+      <Blocks blocks={blocks} pageContent />
+    </div>
+  )
+};
diff --git a/web/src/components/general/accordion.module.scss b/web/src/components/general/accordion.module.scss
index e96daa7..3819aa9 100644
--- a/web/src/components/general/accordion.module.scss
+++ b/web/src/components/general/accordion.module.scss
@@ -52,10 +52,6 @@
 .accordionContent {
   padding: var(--spacing-m) 0 var(--spacing-s);
   display: none;
-
-  >div {
-    padding-bottom: 0;
-  }
 }
 
 .icon {
diff --git a/web/src/components/general/pageContent.module.scss b/web/src/components/general/pageContent.module.scss
new file mode 100644
index 0000000..9246ab9
--- /dev/null
+++ b/web/src/components/general/pageContent.module.scss
@@ -0,0 +1,3 @@
+.pageContent {
+  padding-bottom: var(--spacing-section-bottom);
+}
\ No newline at end of file