From ebb0ee41ff326fd51bbf5cb85393e695c27f725e Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Mon, 15 Jul 2024 15:18:04 +0200
Subject: [PATCH] tidy up, add section header component with links + make
 breadcrumb component

---
 web/src/app/aktuelt/[slug]/page.tsx           |  5 ++--
 web/src/app/foreninger/[slug]/page.tsx        |  5 ++--
 web/src/app/lokaler/[slug]/page.tsx           |  2 ++
 web/src/app/utleie/page.tsx                   |  2 +-
 web/src/components/events/EventHeader.tsx     |  5 ++--
 web/src/components/events/FeaturedEvents.tsx  |  8 ++----
 web/src/components/events/UpcomingEvents.tsx  | 11 ++------
 web/src/components/general/Breadcrumb.tsx     | 11 ++++++++
 web/src/components/general/SectionHeader.tsx  | 16 ++++++++++++
 .../components/general/breadcrumb.module.scss | 26 +++++++++++++++++++
 .../general/sectionHeader.module.scss         | 20 ++++++++++++++
 web/src/components/news/NewsList.tsx          |  8 ++----
 web/src/components/venues/VenueList.tsx       |  8 ++----
 web/src/css/base.scss                         | 11 --------
 14 files changed, 90 insertions(+), 48 deletions(-)
 create mode 100644 web/src/components/general/Breadcrumb.tsx
 create mode 100644 web/src/components/general/SectionHeader.tsx
 create mode 100644 web/src/components/general/breadcrumb.module.scss
 create mode 100644 web/src/components/general/sectionHeader.module.scss

diff --git a/web/src/app/aktuelt/[slug]/page.tsx b/web/src/app/aktuelt/[slug]/page.tsx
index ef5ea55..a8fd4ed 100644
--- a/web/src/app/aktuelt/[slug]/page.tsx
+++ b/web/src/app/aktuelt/[slug]/page.tsx
@@ -1,5 +1,6 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
+import { Breadcrumb } from "@/components/general/Breadcrumb";
 import { ImageFigure } from "@/components/general/Image";
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
@@ -51,9 +52,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   return (
     <main className="site-main" id="main">
       <section className="news-header">
-        <p className="suphead news-details">
-          Nyhet &mdash; {formatDate(news.firstPublishedAt, "d. MMMM yyyy")}
-        </p>
+        <Breadcrumb link="/aktuelt" text="Nyhet" date={formatDate(news.firstPublishedAt, "d. MMMM yyyy")} />
         <h1 className="news-title">{news.title}</h1>
         {news.lead && (
           <div
diff --git a/web/src/app/foreninger/[slug]/page.tsx b/web/src/app/foreninger/[slug]/page.tsx
index 3a77ad6..a65976c 100644
--- a/web/src/app/foreninger/[slug]/page.tsx
+++ b/web/src/app/foreninger/[slug]/page.tsx
@@ -1,5 +1,6 @@
 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 { graphql } from "@/gql";
@@ -53,9 +54,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
   return (
     <main className="site-main" id="main">
-      <span className="suphead breadcrumb">
-        <Link href="/foreninger">{association.associationType}</Link>
-      </span>
+      <Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
       <section className="page-header">
         <h1>{association.title}</h1>
         {association.websiteUrl && (
diff --git a/web/src/app/lokaler/[slug]/page.tsx b/web/src/app/lokaler/[slug]/page.tsx
index ab17e8d..e2d0dcf 100644
--- a/web/src/app/lokaler/[slug]/page.tsx
+++ b/web/src/app/lokaler/[slug]/page.tsx
@@ -1,6 +1,7 @@
 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 { NeufMap } from "@/components/venues/NeufMap";
 import { VenueInfo } from "@/components/venues/VenueInfo";
@@ -102,6 +103,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   return (
     <main className="site-main" id="main">
       <ImageSliderBlock block={placeholderBlock} hero />
+      <Breadcrumb link="/utleie" text="Lokale" />
       <h1 className="page-title">{venue.title}</h1>
       {/*featuredImage && (
           <Image
diff --git a/web/src/app/utleie/page.tsx b/web/src/app/utleie/page.tsx
index dfb4066..f782a6a 100644
--- a/web/src/app/utleie/page.tsx
+++ b/web/src/app/utleie/page.tsx
@@ -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} />}
-      <VenueList venues={bookableVenues} />
+      <VenueList venues={bookableVenues} heading="Våre lokaler" />
       <BgPig type="key" />
     </main>
   );
diff --git a/web/src/components/events/EventHeader.tsx b/web/src/components/events/EventHeader.tsx
index e7cf0a8..c03dde3 100644
--- a/web/src/components/events/EventHeader.tsx
+++ b/web/src/components/events/EventHeader.tsx
@@ -4,6 +4,7 @@ import { Image } from "@/components/general/Image";
 import Link from "next/link";
 import { OrganizerList } from "./OrganizerList";
 import Icon from "../general/Icon";
+import { Breadcrumb } from "../general/Breadcrumb";
 
 function formatPrice(price: number): string {
   if (price === null) {
@@ -24,9 +25,7 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
   return (
     <div className={styles.eventHeader}>
       <div className={styles.text}>
-        <span className="suphead breadcrumb">
-          <Link href="/arrangementer">Arrangement</Link>
-        </span>
+        <Breadcrumb link="/arrangementer" text="Arrangement" />
         <h1 className={styles.title}>{event.title}</h1>
         <div className={styles.eventDetails}>
           <div className={styles.prices}>
diff --git a/web/src/components/events/FeaturedEvents.tsx b/web/src/components/events/FeaturedEvents.tsx
index 5d5364e..aa16500 100644
--- a/web/src/components/events/FeaturedEvents.tsx
+++ b/web/src/components/events/FeaturedEvents.tsx
@@ -1,16 +1,12 @@
 import { EventFragment } from "@/gql/graphql";
 import { EventItem } from "./EventItem";
 import styles from "./featuredEvents.module.scss";
+import { SectionHeader } from "../general/SectionHeader";
 
 export const FeaturedEvents = ({ events }: { events: EventFragment[] }) => {
   return (
     <section>
-      <h2 className="circlehead">
-        <span className="circle"></span>
-        <span className="circle"></span>
-        <span className="circle"></span>
-        Arrangementer
-      </h2>
+      <SectionHeader heading="Arrangementer" link="/arrangementer" linkText="Se alle arrangementer" />
       <ul className={styles.eventList}>
         {events.slice(0, 3).map((event) => (
           <EventItem key={event.id} event={event} mode="list" />
diff --git a/web/src/components/events/UpcomingEvents.tsx b/web/src/components/events/UpcomingEvents.tsx
index 3710b3e..38c79ff 100644
--- a/web/src/components/events/UpcomingEvents.tsx
+++ b/web/src/components/events/UpcomingEvents.tsx
@@ -9,6 +9,7 @@ import {
 import Link from "next/link";
 import { EventItem } from "./EventItem";
 import styles from "./upcomingEvents.module.scss";
+import { SectionHeader } from "../general/SectionHeader";
 
 export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
   const upcomingSingularEvents = sortSingularEvents(
@@ -21,12 +22,7 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
 
   return (
     <section className={styles.upcomingWrapper}>
-      <h2 className="circlehead">
-        <span className="circle"></span>
-        <span className="circle"></span>
-        <span className="circle"></span>
-        Denne uka på Chateau Neuf
-      </h2>
+      <SectionHeader heading="Dette skjer på Neuf" link="/arrangementer?mode=calendar" linkText="Vis kalender" />
       <div className={styles.eventList}>
         {Object.keys(eventsByDate).map((day) => {
           const eventsThisDay = eventsByDate[day];
@@ -52,9 +48,6 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
           );
         })}
       </div>
-      <div className={styles.calendarLink}>
-        <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
-      </div>
     </section>
   );
 };
diff --git a/web/src/components/general/Breadcrumb.tsx b/web/src/components/general/Breadcrumb.tsx
new file mode 100644
index 0000000..75f774a
--- /dev/null
+++ b/web/src/components/general/Breadcrumb.tsx
@@ -0,0 +1,11 @@
+import Link from "next/link";
+import styles from "./breadcrumb.module.scss";
+
+export const Breadcrumb = ({ link, text, date }: { link: string, text: string, date?: string }) => {
+  return (
+    <div className={styles.breadcrumb}>
+      <Link href={link}>{text}</Link>
+      {date && <span className={styles.date}>{date}</span>}
+    </div>
+  );
+};
diff --git a/web/src/components/general/SectionHeader.tsx b/web/src/components/general/SectionHeader.tsx
new file mode 100644
index 0000000..98764ec
--- /dev/null
+++ b/web/src/components/general/SectionHeader.tsx
@@ -0,0 +1,16 @@
+import Link from "next/link";
+import styles from "./sectionHeader.module.scss";
+
+export const SectionHeader = ({ heading, link, linkText }: { heading: string, link?: string, linkText?: string }) => {
+  return (
+    <header className={styles.sectionHeader}>
+      <h2 className="circlehead">
+        <span className="circle"></span>
+        <span className="circle"></span>
+        <span className="circle"></span>
+        {heading}
+      </h2>
+      {link && linkText && <Link href={link}>{linkText}</Link>}
+    </header>
+  );
+};
diff --git a/web/src/components/general/breadcrumb.module.scss b/web/src/components/general/breadcrumb.module.scss
new file mode 100644
index 0000000..5bdc6a8
--- /dev/null
+++ b/web/src/components/general/breadcrumb.module.scss
@@ -0,0 +1,26 @@
+.breadcrumb {
+  display: block;
+  font-weight: 400;
+  font-size: var(--font-size-xs);
+  margin-bottom: var(--spacing-s);
+
+  a {
+    text-decoration: none;
+    font-size: var(--font-size-caption);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    font-weight: 400;
+  }
+}
+
+.date {
+  font-size: var(--font-size-caption);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  font-weight: 400;
+  &:before {
+    content: "—";
+    display: inline-block;
+    margin: 0 .25rem;
+  }
+}
\ No newline at end of file
diff --git a/web/src/components/general/sectionHeader.module.scss b/web/src/components/general/sectionHeader.module.scss
new file mode 100644
index 0000000..ea3e864
--- /dev/null
+++ b/web/src/components/general/sectionHeader.module.scss
@@ -0,0 +1,20 @@
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  a {
+    display: block;
+    font-family: var(--font-serif);
+    margin-bottom: var(--spacing-s);
+    position: relative;
+    /*padding-left: 1.6rem;
+
+    &:before {
+      content: "→";
+      position: absolute;
+      left: 0;
+    }*/
+  }
+}
+
diff --git a/web/src/components/news/NewsList.tsx b/web/src/components/news/NewsList.tsx
index 14a4a88..4ebe5f4 100644
--- a/web/src/components/news/NewsList.tsx
+++ b/web/src/components/news/NewsList.tsx
@@ -1,3 +1,4 @@
+import { SectionHeader } from "../general/SectionHeader";
 import { NewsItem } from "./NewsItem";
 import styles from "./newsList.module.scss";
 import { NewsFragment } from "@/lib/news";
@@ -18,12 +19,7 @@ export const NewsList = ({
   return (
     <section className={styles.newsWrapper}>
       {heading && (
-        <h2 className="circlehead">
-          <span className="circle"></span>
-          <span className="circle"></span>
-          <span className="circle"></span>
-          {heading}
-        </h2>
+        <SectionHeader heading={heading} link="/aktuelt" linkText="Se flere artikler" />
       )}
       <ul className={`${styles.newsList} ${featured && styles.featured}`}>
         {filteredNews.map((singleNews) => (
diff --git a/web/src/components/venues/VenueList.tsx b/web/src/components/venues/VenueList.tsx
index c2e9ee3..e81fb19 100644
--- a/web/src/components/venues/VenueList.tsx
+++ b/web/src/components/venues/VenueList.tsx
@@ -1,6 +1,7 @@
 import { VenueFragment } from "@/gql/graphql";
 import { VenueItem } from "./VenueItem";
 import styles from "./venueList.module.scss";
+import { SectionHeader } from "../general/SectionHeader";
 
 export const VenueList = ({
   venues,
@@ -12,12 +13,7 @@ export const VenueList = ({
   return (
     <div>
       {heading && (
-        <h2 className="circlehead">
-          <span className="circle"></span>
-          <span className="circle"></span>
-          <span className="circle"></span>
-          {heading}
-        </h2>
+        <SectionHeader heading={heading} />
       )}
       <ul className={styles.venueList}>
         {venues.map((venue) => (
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index f645be4..74aa927 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -110,17 +110,6 @@ h6 {
   }
 }
 
-.breadcrumb {
-  display: block;
-  font-weight: 400;
-  font-size: var(--font-size-xs);
-  margin-bottom: var(--spacing-s);
-
-  a {
-    text-decoration: none;
-  }
-}
-
 img {
   max-width: 100%;
   height: auto;