131 lines
4.0 KiB
TypeScript
131 lines
4.0 KiB
TypeScript
import React from "react";
|
|
import {
|
|
getExec,
|
|
getExecNames,
|
|
Metadata,
|
|
getMemberImagePath,
|
|
} from "../../lib/team";
|
|
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
|
|
import { GetStaticProps } from "next";
|
|
import { Image } from "../../components/Image";
|
|
import { TeamMemberCard } from "../../components/TeamMemberCard";
|
|
import { TeamMember } from "../../components/TeamMember";
|
|
import { Link } from "../../components/Link";
|
|
import { Bubble } from "../../components/Bubble";
|
|
import programmeData from "../../content/meet-the-team/programme-committee.json";
|
|
import websiteData from "../../content/meet-the-team/website-committee.json";
|
|
import systemsData from "../../content/meet-the-team/systems-committee.json";
|
|
import styles from "./team.module.css";
|
|
|
|
// TODO: fix hotdog for elections
|
|
// change News link in elections to point to News page
|
|
|
|
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 (
|
|
<>
|
|
<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>
|
|
<Bubble>
|
|
<div className={styles.elections}>
|
|
<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</Link>. <br />
|
|
For details on the elections, read our
|
|
<Link href="/about/constitution"> Constitution</Link>
|
|
</div>
|
|
</Bubble>
|
|
</>
|
|
);
|
|
}
|
|
|
|
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 getMemberImage(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 = await getMemberImage(programmeData);
|
|
const website = await getMemberImage(websiteData);
|
|
const systems = await getMemberImage(systemsData);
|
|
|
|
return {
|
|
props: { execs, programme, website, systems },
|
|
};
|
|
};
|