142 lines
3.5 KiB
TypeScript
142 lines
3.5 KiB
TypeScript
import { GetStaticProps } from "next";
|
|
import React from "react";
|
|
|
|
import { Bubble } from "@/components/Bubble";
|
|
import { DefaultLayout } from "@/components/DefaultLayout";
|
|
import { Image } from "@/components/Image";
|
|
import { Link } from "@/components/Link";
|
|
import { TeamMember } from "@/components/TeamMember";
|
|
import { Title } from "@/components/Title";
|
|
import { Metadata, getMemberImagePath } from "@/lib/team";
|
|
|
|
import F21ExecData from "../../content/past-execs/2021/fall.json";
|
|
import S21ExecData from "../../content/past-execs/2021/spring.json";
|
|
import W21ExecData from "../../content/past-execs/2021/winter.json";
|
|
import W22ExecData from "../../content/past-execs/2022/winter.json";
|
|
|
|
import styles from "./executives.module.css";
|
|
|
|
interface Props {
|
|
F21Exec: Metadata[];
|
|
S21Exec: Metadata[];
|
|
W21Exec: Metadata[];
|
|
W22Exec: Metadata[];
|
|
}
|
|
|
|
export default function Executives({
|
|
F21Exec,
|
|
S21Exec,
|
|
W21Exec,
|
|
W22Exec,
|
|
}: Props) {
|
|
const teams = [
|
|
{
|
|
id: "W22Exec",
|
|
name: "Winter 2022",
|
|
members: W22Exec,
|
|
},
|
|
{
|
|
id: "F21Exec",
|
|
name: "Fall 2021",
|
|
members: F21Exec,
|
|
},
|
|
{
|
|
id: "S21Exec",
|
|
name: "Spring 2021",
|
|
members: S21Exec,
|
|
},
|
|
{
|
|
id: "W21Exec",
|
|
name: "Winter 2021",
|
|
members: W21Exec,
|
|
},
|
|
];
|
|
return (
|
|
<>
|
|
<Title>Team</Title>
|
|
<DefaultLayout>
|
|
<div className={styles.headerContainer}>
|
|
<div className={styles.headerTextContainer}>
|
|
<h1 className={styles.header}>Meet the Past Executives!</h1>
|
|
<div className={styles.nav}>
|
|
<Link href="#F21Exec">Fall 2021</Link>
|
|
<Link href="#S21Exec">Spring 2021</Link>
|
|
<Link href="#W21Exec">Winter 2021</Link>
|
|
</div>
|
|
</div>
|
|
<Image src="images/team/team-codey.svg" className={styles.codey} />
|
|
</div>
|
|
{teams.map((team) => {
|
|
return (
|
|
<div id={team.id} key={team.id}>
|
|
<h2 className={styles.subheading}>{team.name}</h2>
|
|
<MembersList team={team.members} />
|
|
</div>
|
|
);
|
|
})}
|
|
</DefaultLayout>
|
|
<div className={styles.info}>
|
|
<Bubble>
|
|
<h2 className={styles.infoSubheading}>More information</h2>
|
|
To learn more about our past executives, see our{" "}
|
|
<Link href="https://wiki.csclub.uwaterloo.ca/Past_Executive">
|
|
Wikipedia
|
|
</Link>
|
|
.
|
|
</Bubble>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Executives.Layout = function TeamLayout(props: { children: React.ReactNode }) {
|
|
return <div>{props.children}</div>;
|
|
};
|
|
|
|
interface MembersProps {
|
|
team: Metadata[];
|
|
}
|
|
|
|
function MembersList(props: MembersProps) {
|
|
return (
|
|
<div className={styles.members}>
|
|
{props.team.map((member) => (
|
|
<TeamMember {...member} key={member.name} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type TeamMember = Omit<Metadata, "image"> & { image?: string };
|
|
|
|
async function getTeamWithImages(team: TeamMember[]) {
|
|
return await Promise.all(
|
|
team.map(async (member) => {
|
|
const image =
|
|
member.image ?? (await getMemberImagePath(member.name, false));
|
|
return {
|
|
...member,
|
|
image,
|
|
};
|
|
})
|
|
);
|
|
}
|
|
|
|
export const getStaticProps: GetStaticProps<Props> = async () => {
|
|
const [F21Exec, S21Exec, W21Exec, W22Exec] = await Promise.all([
|
|
getTeamWithImages(F21ExecData),
|
|
getTeamWithImages(S21ExecData),
|
|
getTeamWithImages(W21ExecData),
|
|
getTeamWithImages(W22ExecData),
|
|
]);
|
|
|
|
return {
|
|
props: {
|
|
F21Exec,
|
|
S21Exec,
|
|
W21Exec,
|
|
W22Exec,
|
|
},
|
|
};
|
|
};
|