tidy up, add section header component with links + make breadcrumb component

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">
+        <Breadcrumb link="/aktuelt" text="Nyhet" date={formatDate(news.firstPublishedAt, "d. MMMM yyyy")} />
-          Nyhet &mdash; {formatDate(news.firstPublishedAt, "d. MMMM yyyy")}
-        </p>
         <h1 className="news-title">{news.title}</h1>
         {news.lead && (
           <div

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">
+      <Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
-        <Link href="/foreninger">{association.associationType}</Link>
-      </span>
       <section className="page-header">
         <h1>{association.title}</h1>
         {association.websiteUrl && (

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

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>
   );

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">
+        <Breadcrumb link="/arrangementer" text="Arrangement" />
-          <Link href="/arrangementer">Arrangement</Link>
-        </span>
         <h1 className={styles.title}>{event.title}</h1>
         <div className={styles.eventDetails}>
           <div className={styles.prices}>

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">
+      <SectionHeader heading="Arrangementer" link="/arrangementer" linkText="Se alle arrangementer" />
-        <span className="circle"></span>
-        <span className="circle"></span>
-        <span className="circle"></span>
-        Arrangementer
-      </h2>
       <ul className={styles.eventList}>
         {events.slice(0, 3).map((event) => (
           <EventItem key={event.id} event={event} mode="list" />

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">
+      <SectionHeader heading="Dette skjer på Neuf" link="/arrangementer?mode=calendar" linkText="Vis kalender" />
-        <span className="circle"></span>
-        <span className="circle"></span>
-        <span className="circle"></span>
-        Denne uka på Chateau Neuf
-      </h2>
       <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>
   );
 };

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>
+  );
+};

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>
+  );
+};

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;
+  }
+}

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;
+    }*/
+  }
+}
+

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">
+        <SectionHeader heading={heading} link="/aktuelt" linkText="Se flere artikler" />
-          <span className="circle"></span>
-          <span className="circle"></span>
-          <span className="circle"></span>
-          {heading}
-        </h2>
       )}
       <ul className={`${styles.newsList} ${featured && styles.featured}`}>
         {filteredNews.map((singleNews) => (

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">
+        <SectionHeader heading={heading} />
-          <span className="circle"></span>
-          <span className="circle"></span>
-          <span className="circle"></span>
-          {heading}
-        </h2>
       )}
       <ul className={styles.venueList}>
         {venues.map((venue) => (

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;