Styling and changing

pages/events/[year]/[term]/index.module.css

@@ -14,6 +14,15 @@
   }
 }
 
+.header a {
+  color: var(--text);
+  margin-left: calc(30rem / 16);
+}
+
+.header a .curTerm {
+  color: var(--primary-accent);
+}
+
 .blue {
   color: var(--primary-accent);
 }

pages/events/[year]/[term]/index.tsx

@@ -5,6 +5,7 @@ import { MDXRemote } from "next-mdx-remote";
 import React from "react";
 
 import { EventCard } from "@/components/EventCard";
+import { Link } from "@/components/Link";
 import { MiniEventCard } from "@/components/MiniEventCard";
 import {
   Event,
@@ -34,41 +35,62 @@ export default function Term(props: Props) {
     <div className={styles.main}>
       {!hasPastTerms && hasFutureTerms && (
         <div className={styles.header}>
-          <h3 className={styles.curTerm}>{`${capitalize(props.term)} ${
-            props.year
-          }`}</h3>
-          <h3>{`${capitalize(props.futureTerms[0].term)} ${
+          <Link href={`/events/${props.year}/${props.term}`}>
+            <span className={styles.curTerm}>
+              {`${capitalize(props.term)} ${props.year}`}
+            </span>
+          </Link>
+          <Link
+            href={`/events/${props.futureTerms[0].year}/${props.futureTerms[0].term}`}
+          >{`${capitalize(props.futureTerms[0].term)} ${
             props.futureTerms[0].year
-          }`}</h3>
-          <h3>{`${capitalize(props.futureTerms[1].term)} ${
+          }`}</Link>
+          <Link
+            href={`/events/${props.futureTerms[1].year}/${props.futureTerms[1].term}`}
+          >{`${capitalize(props.futureTerms[1].term)} ${
             props.futureTerms[1].year
-          }`}</h3>
+          }`}</Link>
+          <Link href={"/events/archives"}>Archives</Link>
         </div>
       )}
       {hasPastTerms && hasFutureTerms && (
         <div className={styles.header}>
-          <h3>{`${capitalize(props.pastTerms[0].term)} ${
+          <Link
+            href={`/events/${props.pastTerms[0].year}/${props.pastTerms[0].term}`}
+          >{`${capitalize(props.pastTerms[0].term)} ${
             props.pastTerms[0].year
-          }`}</h3>
-          <h3 className={styles.curTerm}>{`${capitalize(props.term)} ${
-            props.year
-          }`}</h3>
-          <h3>{`${capitalize(props.futureTerms[0].term)} ${
+          }`}</Link>
+          <Link href={`/events/${props.year}/${props.term}`}>
+            <span className={styles.curTerm}>
+              {`${capitalize(props.term)} ${props.year}`}
+            </span>
+          </Link>
+          <Link
+            href={`/events/${props.futureTerms[0].year}/${props.futureTerms[0].term}`}
+          >{`${capitalize(props.futureTerms[0].term)} ${
             props.futureTerms[0].year
-          }`}</h3>
+          }`}</Link>
+          <Link href={"/events/archives"}>Archives</Link>
         </div>
       )}
       {hasPastTerms && !hasFutureTerms && (
         <div className={styles.header}>
-          <h3>{`${capitalize(props.pastTerms[1].term)} ${
+          <Link
+            href={`/events/${props.pastTerms[1].year}/${props.pastTerms[1].term}`}
+          >{`${capitalize(props.pastTerms[1].term)} ${
             props.pastTerms[1].year
-          } `}</h3>
-          <h3>{`${capitalize(props.pastTerms[0].term)} ${
+          } `}</Link>
+          <Link
+            href={`/events/${props.pastTerms[0].year}/${props.pastTerms[0].term}`}
+          >{`${capitalize(props.pastTerms[0].term)} ${
             props.pastTerms[0].year
-          }`}</h3>
-          <h3 className={styles.curTerm}>{`${capitalize(props.term)} ${
-            props.year
-          }`}</h3>
+          }`}</Link>
+          <Link href={`/events/${props.year}/${props.term}`}>
+            <span className={styles.curTerm}>
+              {`${capitalize(props.term)} ${props.year}`}
+            </span>
+          </Link>
+          <Link href={"/events/archives"}>Archives</Link>
         </div>
       )}
       {hasFutureEvents && (