reuse Advice component, modify changing advice subheading colour

pages/resources/advice/academic.tsx

@@ -1,11 +1,8 @@
-import Link from "next/link";
-import React, { ReactNode } from "react";
-
-import { Image } from "@/components/Image";
+import React from "react";
 
 import Content from "../../../content/advice/academic-advice.mdx";
 
-import styles from "./coop.module.css";
+import { Advice } from "./coop";
 
 export default function CoopAdvice() {
   return (
@@ -14,26 +11,3 @@ export default function CoopAdvice() {
     </Advice>
   );
 }
-
-export function Advice(props: { children: ReactNode }) {
-  return (
-    <>
-      <div className={styles.titleContainer}>
-        <h1 className={styles.title}>Waterloo Undergraduate Advice</h1>
-        <Image src="/resources/advice/codey.svg" />
-      </div>
-      <div className={styles.adviceBarContainer}>
-        <Link href="/resources/advice/coop">
-          <a>Coop Advice</a>
-        </Link>
-        <Link href="/resources/advice/academic">
-          <a className={styles.currentAdvice}>Academic Advice</a>
-        </Link>
-        <Link href="/resources/advice/misc">
-          <a>Additional Resources</a>
-        </Link>
-      </div>
-      <div className={styles.content}>{props.children}</div>
-    </>
-  );
-}

pages/resources/advice/coop.module.css

@@ -19,15 +19,15 @@
 
 .adviceBarContainer > a {
   padding-right: calc(48rem / 16);
-  color: black;
+  color: var(--text);
 }
 
 .adviceBarContainer a:link {
   text-decoration: none;
 }
 
-.currentAdvice {
-  color: var(--primary-accent) !important;
+a.currentAdvice {
+  color: var(--primary-accent);
 }
 
 .content {

pages/resources/advice/coop.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
 
 import { Image } from "@/components/Image";
@@ -16,6 +17,8 @@ export default function CoopAdvice() {
 }
 
 export function Advice(props: { children: ReactNode }) {
+  const router = useRouter();
+  const path = router.pathname;
   return (
     <>
       <div className={styles.titleContainer}>
@@ -24,13 +27,31 @@ export function Advice(props: { children: ReactNode }) {
       </div>
       <div className={styles.adviceBarContainer}>
         <Link href="/resources/advice/coop">
-          <a className={styles.currentAdvice}>Coop Advice</a>
+          <a
+            className={
+              path == "/resources/advice/coop" ? styles.currentAdvice : ""
+            }
+          >
+            Coop Advice
+          </a>
         </Link>
         <Link href="/resources/advice/academic">
-          <a>Academic Advice</a>
+          <a
+            className={
+              path == "/resources/advice/academic" ? styles.currentAdvice : ""
+            }
+          >
+            Academic Advice
+          </a>
         </Link>
         <Link href="/resources/advice/misc">
-          <a>Additional Resources</a>
+          <a
+            className={
+              path == "/resources/advice/misc" ? styles.currentAdvice : ""
+            }
+          >
+            Additional Resources
+          </a>
         </Link>
       </div>
       <div className={styles.content}>{props.children}</div>

pages/resources/advice/misc.tsx

@@ -1,11 +1,8 @@
-import Link from "next/link";
-import React, { ReactNode } from "react";
-
-import { Image } from "@/components/Image";
+import React from "react";
 
 import Content from "../../../content/advice/misc-advice.mdx";
 
-import styles from "./coop.module.css";
+import { Advice } from "./coop";
 
 export default function CoopAdvice() {
   return (
@@ -14,26 +11,3 @@ export default function CoopAdvice() {
     </Advice>
   );
 }
-
-export function Advice(props: { children: ReactNode }) {
-  return (
-    <>
-      <div className={styles.titleContainer}>
-        <h1 className={styles.title}>Waterloo Undergraduate Advice</h1>
-        <Image src="/resources/advice/codey.svg" />
-      </div>
-      <div className={styles.adviceBarContainer}>
-        <Link href="/resources/advice/coop">
-          <a>Coop Advice</a>
-        </Link>
-        <Link href="/resources/advice/academic">
-          <a>Academic Advice</a>
-        </Link>
-        <Link href="/resources/advice/misc">
-          <a className={styles.currentAdvice}>Additional Resources</a>
-        </Link>
-      </div>
-      <div className={styles.content}>{props.children}</div>
-    </>
-  );
-}