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

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

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" />

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

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">
-          <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) => (

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) => (