make separate component for section footer to show links below section content on mobile

web/src/components/events/FeaturedEvents.tsx

@@ -2,16 +2,18 @@ import { EventFragment } from "@/gql/graphql";
 import { EventItem } from "./EventItem";
 import styles from "./featuredEvents.module.scss";
 import { SectionHeader } from "../general/SectionHeader";
+import { SectionFooter } from "../general/SectionFooter";
 
 export const FeaturedEvents = ({ events }: { events: EventFragment[] }) => {
   return (
-    <section>
+    <section className={styles.featuredEvents}>
       <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" />
         ))}
       </ul>
+      <SectionFooter link="/arrangementer" linkText="Se alle arrangementer" />
     </section>
   );
 };

web/src/components/events/UpcomingEvents.tsx

@@ -10,6 +10,7 @@ import Link from "next/link";
 import { EventItem } from "./EventItem";
 import styles from "./upcomingEvents.module.scss";
 import { SectionHeader } from "../general/SectionHeader";
+import { SectionFooter } from "../general/SectionFooter";
 
 export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
   const upcomingSingularEvents = sortSingularEvents(
@@ -50,6 +51,7 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
           })}
         </div>
       </div>
+      <SectionFooter link="/arrangementer?mode=calendar" linkText="Vis kalender" />
     </section>
   );
 };

web/src/components/events/featuredEvents.module.scss

@@ -1,9 +1,12 @@
+.featuredEvents {
+  padding-bottom: var(--spacing-section-bottom);
+}
+
 .eventList {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
-  padding-bottom: var(--spacing-section-bottom);
 }
 
 @media (max-width: 900px) {

web/src/components/events/upcomingEvents.module.scss

@@ -6,11 +6,15 @@
   position: relative;
   overflow-x: hidden;
 
-  header {
+  header, footer {
     position: relative;
     z-index: 10;
   }
 
+  footer, footer a {
+    margin-top: 0;
+  }
+
   h2 {
     margin-bottom: var(--spacing-xs);
   }
@@ -52,4 +56,10 @@
   ul {
     display: flex;
   }
+}
+
+@media (max-width: 800px) {
+  .upcomingContent {
+    margin-top: var(--spacing-s);
+  }
 }

web/src/components/general/SectionFooter.tsx

@@ -0,0 +1,10 @@
+import Link from "next/link";
+import styles from "./sectionFooter.module.scss";
+
+export const SectionFooter = ({ link, linkText }: { link: string, linkText: string }) => {
+  return (
+    <footer className={styles.sectionFooter}>
+      {link && linkText && <Link href={link}>{linkText}</Link>}
+    </footer>
+  );
+};

web/src/components/general/sectionFooter.module.scss

@@ -0,0 +1,25 @@
+.sectionFooter {
+  margin-top: var(--spacing-s);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
+
+  a {
+    display: block;
+    font-family: var(--font-serif);
+    position: relative;
+    padding-right: 1.4rem;
+
+    &:after {
+      content: "→";
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  display: none;
+  @media (max-width: 800px) {
+    display: flex;
+  }
+}

web/src/components/general/sectionHeader.module.scss

@@ -17,4 +17,10 @@
       right: 0;
     }
   }
+
+  @media (max-width: 800px) {
+    a {
+      display: none;
+    }
+  }
 }

web/src/components/news/NewsList.tsx

@@ -4,6 +4,7 @@ import { SectionHeader } from "../general/SectionHeader";
 import { NewsItem } from "./NewsItem";
 import styles from "./newsList.module.scss";
 import { NewsFragment } from "@/lib/news";
+import { SectionFooter } from "../general/SectionFooter";
 
 export const NewsList = ({
   news,
@@ -36,6 +37,9 @@ export const NewsList = ({
           </button>
         </div>
       )}
+      {heading && (
+        <SectionFooter link="/aktuelt" linkText="Se flere artikler" />
+      )}
     </section>
   );
 };