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