www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

reuse Advice component, modify changing advice subheading colour
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Linna Luo 2021-08-22 22:09:26 -04:00
parent c66fe32e9c
commit ea5003fc5d
4 changed files with 31 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
pages/resources/advice/academic.tsx
View File

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

6
pages/resources/advice/coop.module.css
View File

@ -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 {

27
pages/resources/advice/coop.tsx
View File

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

30
pages/resources/advice/misc.tsx
View File

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