From 022ed8c143a3b6313696943009a2af9ad7be6603 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Sun, 12 May 2024 20:53:34 +0200
Subject: [PATCH] add generic page header component, person section component
 with headings, ++

---
 web/src/app/arrangementer/page.tsx            |  6 +-
 web/src/app/lokaler/page.tsx                  | 13 ++--
 web/src/app/page.tsx                          | 17 +-----
 web/src/app/utleie/page.tsx                   | 60 +++++++++++++++++++
 web/src/components/general/PageHeader.tsx     | 10 ++++
 .../components/general/pageHeader.module.scss |  3 +
 web/src/components/layout/Header.tsx          |  4 +-
 web/src/components/people/PersonSection.tsx   | 11 ++++
 .../people/personSection.module.scss          | 17 ++++++
 9 files changed, 114 insertions(+), 27 deletions(-)
 create mode 100644 web/src/app/utleie/page.tsx
 create mode 100644 web/src/components/general/PageHeader.tsx
 create mode 100644 web/src/components/general/pageHeader.module.scss
 create mode 100644 web/src/components/people/PersonSection.tsx
 create mode 100644 web/src/components/people/personSection.module.scss

diff --git a/web/src/app/arrangementer/page.tsx b/web/src/app/arrangementer/page.tsx
index 29d1175..105c678 100644
--- a/web/src/app/arrangementer/page.tsx
+++ b/web/src/app/arrangementer/page.tsx
@@ -1,8 +1,8 @@
-
 import { EventFragment, EventOccurrence } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { EventContainer } from "@/components/events/EventContainer";
 import { allEventsQuery } from "@/lib/event";
+import { PageHeader } from "@/components/general/PageHeader";
 
 export default async function Page() {
   const { data, error } = await getClient().query(allEventsQuery, {});
@@ -10,9 +10,7 @@ export default async function Page() {
 
   return (
     <main className="site-main" id="main">
-      <section className="page-header">
-        <h1>Arrangementer</h1>
-      </section>
+      <PageHeader heading="Dette skjer på Chateau Neuf" />
       <EventContainer events={events} />
     </main>
   );
diff --git a/web/src/app/lokaler/page.tsx b/web/src/app/lokaler/page.tsx
index 3fa7014..2b9c1f5 100644
--- a/web/src/app/lokaler/page.tsx
+++ b/web/src/app/lokaler/page.tsx
@@ -3,6 +3,7 @@ import { VenueFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { VenueList } from "@/components/venues/VenueList";
 import Link from "next/link";
+import { PageHeader } from "@/components/general/PageHeader";
 
 const VenueFragmentDefinition = graphql(`
   fragment Venue on VenuePage {
@@ -54,13 +55,11 @@ export default async function Page() {
 
   return (
     <main className="site-main" id="main">
-      <section className="page-header">
-        <h1>Lokaler</h1>
-        <p className="lead">
-          Her kan vi presentere lokalene på Chateau Neuf, og eventuelt henvise
-          videre til undersiden om <Link href="/utleie">utleie</Link>.
-        </p>
-      </section>
+      <PageHeader heading="Lokaler" />
+      <p className="lead">
+        Her kan vi presentere lokalene på Chateau Neuf, og eventuelt henvise
+        videre til undersiden om <Link href="/utleie">utleie</Link>.
+      </p>
       <VenueList venues={venues} />
     </main>
   );
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index b97acbd..803238b 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -6,6 +6,7 @@ import { Body } from "@/components/general/Body";
 import Image from "next/image";
 import { PersonList } from "@/components/people/PersonList";
 import { NewsList } from "@/components/news/NewsList";
+import { PersonSection } from "@/components/people/PersonSection";
 
 export default async function Home() {
   const homeQuery = graphql(`
@@ -24,20 +25,8 @@ export default async function Home() {
         <FeaturedEvents events={events} />
         <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
         <NewsList />
-        <div>
-          <h2>Styret</h2>
-          <PersonList />
-        </div>
-        <div>
-          <h2>Administrasjonen</h2>
-          <PersonList />
-        </div>
-        <p className="lead">
-          Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
-          Suspendisse potenti. Sed auctor enim et augue dapibus, vitae laoreet
-          lacus vulputate. Nulla sed finibus diam.
-        </p>
-        <Body />
+        <PersonSection heading="Styret" />
+        <PersonSection heading="Administrasjonen" />
       </div>
     </main>
   );
diff --git a/web/src/app/utleie/page.tsx b/web/src/app/utleie/page.tsx
new file mode 100644
index 0000000..6064aa4
--- /dev/null
+++ b/web/src/app/utleie/page.tsx
@@ -0,0 +1,60 @@
+import { graphql } from "@/gql";
+import { VenueFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
+import { VenueList } from "@/components/venues/VenueList";
+import Link from "next/link";
+import { PageHeader } from "@/components/general/PageHeader";
+
+const VenueFragmentDefinition = graphql(`
+  fragment Venue on VenuePage {
+    __typename
+    id
+    slug
+    title
+    body {
+      id
+      blockType
+      field
+      ... on RichTextBlock {
+        rawValue
+        value
+      }
+    }
+    featuredImage {
+      url
+      width
+      height
+    }
+    showAsBookable
+    floor
+    preposition
+    capabilityAudio
+    capabilityAudioVideo
+    capabilityBar
+    capabilityLighting
+    capacityLegal
+    capacityStanding
+    capacitySitting
+  }
+`);
+
+export default async function Page() {
+  const allVenuesQuery = graphql(`
+    query allVenues {
+      venues: pages(contentType: "venues.VenuePage") {
+        ... on VenuePage {
+          ...Venue
+        }
+      }
+    }
+  `);
+  const { data, error } = await getClient().query(allVenuesQuery, {});
+  const venues = (data?.venues ?? []) as VenueFragment[];
+
+  return (
+    <main className="site-main" id="main">
+      <PageHeader heading="Utleie" />
+      <VenueList venues={venues} />
+    </main>
+  );
+}
diff --git a/web/src/components/general/PageHeader.tsx b/web/src/components/general/PageHeader.tsx
new file mode 100644
index 0000000..4708772
--- /dev/null
+++ b/web/src/components/general/PageHeader.tsx
@@ -0,0 +1,10 @@
+import styles from "./pageHeader.module.scss";
+
+export const PageHeader = ({ heading }: { heading: string }) => {
+  return (
+    <div className={styles.pageHeader}>
+      <h1 className={styles.title}>{heading}</h1>
+      <p className="lead">Lead</p>
+    </div>
+  );
+};
diff --git a/web/src/components/general/pageHeader.module.scss b/web/src/components/general/pageHeader.module.scss
new file mode 100644
index 0000000..592b9dc
--- /dev/null
+++ b/web/src/components/general/pageHeader.module.scss
@@ -0,0 +1,3 @@
+.pageHeader {
+  position: relative;
+}
\ No newline at end of file
diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index ad1073f..cac35ef 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -24,7 +24,7 @@ export const Header = () => {
             <Link href="/">Praktisk info</Link>
           </li>
           <li>
-            <Link href="/">Utleie</Link>
+            <Link href="/utleie">Utleie</Link>
           </li>
           <li>
             <Link href="/">Bli medlem</Link>
@@ -45,7 +45,7 @@ export const Header = () => {
             <Link href="/">Praktisk info</Link>
           </li>
           <li className={styles.menuItemLarge}>
-            <Link href="/">Utleie</Link>
+            <Link href="/utleie">Utleie</Link>
           </li>
           <li className={styles.menuItemLarge}>
             <Link href="/">Bli medlem</Link>
diff --git a/web/src/components/people/PersonSection.tsx b/web/src/components/people/PersonSection.tsx
new file mode 100644
index 0000000..2dbb70c
--- /dev/null
+++ b/web/src/components/people/PersonSection.tsx
@@ -0,0 +1,11 @@
+import { PersonList } from "./PersonList";
+import styles from "./personSection.module.scss";
+
+export const PersonSection = ({ heading }: { heading: string }) => {
+  return (
+    <section className={styles.personSection}>
+      <h2 className={styles.heading}>{heading}</h2>
+      <PersonList />
+    </section>
+  );
+};
diff --git a/web/src/components/people/personSection.module.scss b/web/src/components/people/personSection.module.scss
new file mode 100644
index 0000000..bf87a01
--- /dev/null
+++ b/web/src/components/people/personSection.module.scss
@@ -0,0 +1,17 @@
+.personSection {
+  background: var(--color-background-secondary);
+  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+
+  +.personSection {
+    margin-top: calc(var(--spacing-sitepadding)*-2);
+  }
+
+  &:nth-of-type(even) {
+    background: var(--color-background);
+  }
+}
+
+.heading {
+  margin: 2rem 0;
+}
\ No newline at end of file