Computer Science Club of the University of Waterloo's website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
www-new/pages/about/team.tsx

139 lines
4.2 KiB

import { GetStaticProps } from "next";
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
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 { TeamMemberCard } from "@/components/TeamMemberCard";
import {
getExec,
getExecNames,
Metadata,
getMemberImagePath,
} from "@/lib/team";
import programmeData from "../../content/meet-the-team/programme-committee.json";
import systemsData from "../../content/meet-the-team/systems-committee.json";
import websiteData from "../../content/meet-the-team/website-committee.json";
import styles from "./team.module.css";
interface SerializedExec {
content: MDXRemoteSerializeResult;
metadata: Metadata;
}
interface Props {
execs: SerializedExec[];
programme: Metadata[];
website: Metadata[];
systems: Metadata[];
}
export default function Team({ execs, programme, website, systems }: Props) {
return (
<>
<DefaultLayout>
<div className={styles.headerContainer}>
<div className={styles.headerTextContainer}>
<h1 className={styles.header}>Meet the Team!</h1>
<div className={styles.nav}>
<Link href="#execs">The Executives</Link>
<Link href="#programme">Programme Committee</Link>
<Link href="#website">Website Committee</Link>
<Link href="#system">Systems Committee</Link>
</div>
<h2
className={styles.subheading}
style={{ borderBottom: "none", margin: 0, padding: 0 }}
>
The Executives
</h2>
</div>
<Image src="images/team/team-codey.svg" className={styles.codey} />
</div>
<div className={styles.execs} id="execs">
{execs.map((exec) => {
return (
<div key={exec.metadata.name}>
<TeamMemberCard {...exec.metadata}>
<MDXRemote {...exec.content} />
</TeamMemberCard>
</div>
);
})}
</div>
<div id="programme">
<h2 className={styles.subheading}>Programme Committee</h2>
<MembersList team={programme} />
</div>
<div id="website">
<h2 className={styles.subheading}>Website Committee</h2>
<MembersList team={website} />
</div>
<div id="system">
<h2 className={styles.subheading}>Systems Committee</h2>
<MembersList team={systems} />
</div>
</DefaultLayout>
<div className={styles.elections}>
<Bubble>
<h2 className={styles.electionSubheading}>Elections</h2>
To find out when and where the next elections will be held, keep an
eye on on the <Link href="/#news">News</Link>. <br />
For details on the elections, read our
<Link href="/about/constitution"> Constitution</Link>
</Bubble>
</div>
</>
);
}
Team.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>
);
}
async function getTeamWithImages(team: Omit<Metadata, "image">[]) {
return await Promise.all(
team.map(async (member) => {
const image = await getMemberImagePath(member.name);
return {
...member,
image,
};
})
);
}
export const getStaticProps: GetStaticProps<Props> = async () => {
const execNames = await getExecNames();
const execs = (await Promise.all(
execNames.map((name) => getExec(name))
)) as SerializedExec[];
const [programme, website, systems] = await Promise.all([
getTeamWithImages(programmeData),
getTeamWithImages(websiteData),
getTeamWithImages(systemsData),
]);
return {
props: { execs, programme, website, systems },
};
};