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 from "react";
import React, { ReactNode } from "react";
import { Image } from "@/components/Image";
import Content from "../../../content/advice/academic-advice.mdx"; import Content from "../../../content/advice/academic-advice.mdx";
import styles from "./coop.module.css"; import { Advice } from "./coop";
export default function CoopAdvice() { export default function CoopAdvice() {
return ( return (
@ -14,26 +11,3 @@ export default function CoopAdvice() {
</Advice> </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 { .adviceBarContainer > a {
padding-right: calc(48rem / 16); padding-right: calc(48rem / 16);
color: black; color: var(--text);
} }
.adviceBarContainer a:link { .adviceBarContainer a:link {
text-decoration: none; text-decoration: none;
} }
.currentAdvice { a.currentAdvice {
color: var(--primary-accent) !important; color: var(--primary-accent);
} }
.content { .content {

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

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