From 80421b537a720726378dbcaba035540fbd25fca8 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Mon, 13 May 2024 02:13:03 +0200
Subject: [PATCH] add news to front page and move people to contact page

---
 web/src/app/kontakt/page.tsx                 | 20 +++++++++
 web/src/app/page.tsx                         |  3 +-
 web/src/components/general/PageHeader.tsx    | 10 ++++-
 web/src/components/layout/Header.tsx         |  2 +-
 web/src/components/news/NewsList.tsx         | 45 ++++++++++++++------
 web/src/components/news/newsList.module.scss | 24 ++++++++++-
 6 files changed, 86 insertions(+), 18 deletions(-)
 create mode 100644 web/src/app/kontakt/page.tsx

diff --git a/web/src/app/kontakt/page.tsx b/web/src/app/kontakt/page.tsx
new file mode 100644
index 0000000..25d87e9
--- /dev/null
+++ b/web/src/app/kontakt/page.tsx
@@ -0,0 +1,20 @@
+import { graphql } from "@/gql";
+//import { NewsFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
+import { NewsList } from "@/components/news/NewsList";
+import Link from "next/link";
+import { PageHeader } from "@/components/general/PageHeader";
+import { PersonSection } from "@/components/people/PersonSection";
+
+export default async function Page() {
+  return (
+    <main className="site-main" id="main">
+      <PageHeader
+        heading="Kontakt"
+        lead="Her er info om hvordan du kan kontakte oss og sånt."
+      />
+      <PersonSection heading="Styret" />
+      <PersonSection heading="Administrasjonen" />
+    </main>
+  );
+}
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 78ef484..2b41cb9 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -25,9 +25,8 @@ export default async function Home() {
       <div>
         <FeaturedEvents events={events} />
         <UpcomingEvents events={events} />
+        <NewsList heading="Siste nytt" limit={3} featured />
         <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
-        <PersonSection heading="Styret" />
-        <PersonSection heading="Administrasjonen" />
       </div>
     </main>
   );
diff --git a/web/src/components/general/PageHeader.tsx b/web/src/components/general/PageHeader.tsx
index 4708772..7a8c260 100644
--- a/web/src/components/general/PageHeader.tsx
+++ b/web/src/components/general/PageHeader.tsx
@@ -1,10 +1,16 @@
 import styles from "./pageHeader.module.scss";
 
-export const PageHeader = ({ heading }: { heading: string }) => {
+export const PageHeader = ({
+  heading,
+  lead,
+}: {
+  heading: string;
+  lead?: string;
+}) => {
   return (
     <div className={styles.pageHeader}>
       <h1 className={styles.title}>{heading}</h1>
-      <p className="lead">Lead</p>
+      <p className="lead">{lead}</p>
     </div>
   );
 };
diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 902420d..4cb5512 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -122,7 +122,7 @@ export const Header = () => {
             </Link>
           </li>
           <li>
-            <Link href="/" data-active={pathname === "/kontakt"}>
+            <Link href="/kontakt" data-active={pathname === "/kontakt"}>
               Kontakt
             </Link>
           </li>
diff --git a/web/src/components/news/NewsList.tsx b/web/src/components/news/NewsList.tsx
index b1d0cd7..1e12add 100644
--- a/web/src/components/news/NewsList.tsx
+++ b/web/src/components/news/NewsList.tsx
@@ -1,18 +1,39 @@
 import { NewsItem } from "./NewsItem";
 import styles from "./newsList.module.scss";
 
-export const NewsList = () => {
+export const NewsList = ({
+  heading,
+  featured,
+  limit,
+}: {
+  heading: string;
+  featured: boolean;
+  limit: number;
+}) => {
   return (
-    <ul className={styles.newsList}>
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-    </ul>
+    <section className={styles.newsWrapper}>
+      {heading && <h2 className="suphead">{heading}</h2>}
+      <ul className={`${styles.newsList} ${featured && styles.featured}`}>
+        {limit === 3 ? (
+          <>
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+          </>
+        ) : (
+          <>
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+          </>
+        )}
+      </ul>
+    </section>
   );
 };
diff --git a/web/src/components/news/newsList.module.scss b/web/src/components/news/newsList.module.scss
index 26b3817..d308b57 100644
--- a/web/src/components/news/newsList.module.scss
+++ b/web/src/components/news/newsList.module.scss
@@ -1,9 +1,18 @@
+.newsWrapper {
+  background: var(--color-background-secondary);
+  margin: 0 calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+
+  h2 {
+    margin-bottom: 1rem;
+  }
+}
+
 .newsList {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
-  padding-bottom: var(--spacing-section-bottom);
 
   li {
     grid-column: span 3;
@@ -31,4 +40,17 @@
       }
     }
   }
+
+  &.featured {
+    li {
+
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3),
+      &:nth-child(4),
+      &:nth-child(5) {
+        grid-column: span 4;
+      }
+    }
+  }
 }
\ No newline at end of file