160 lines
4.9 KiB
TypeScript
160 lines
4.9 KiB
TypeScript
import React from "react";
|
|
import { MDXProvider } from "@mdx-js/react";
|
|
import { getExecContent, getExecNames, Metadata } 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 ElectionContent from "../../content/meet-the-team/elections.mdx";
|
|
import programme from "../../content/meet-the-team/programme-committee.json";
|
|
import website from "../../content/meet-the-team/website-committee.json";
|
|
import systems from "../../content/meet-the-team/systems-committee.json";
|
|
import styles from "./team.module.css";
|
|
|
|
// TODO: get hotdog for elections
|
|
|
|
interface SerializedExec {
|
|
content: MDXRemoteSerializeResult;
|
|
metadata: Metadata;
|
|
}
|
|
|
|
interface Props {
|
|
execs: SerializedExec[];
|
|
}
|
|
|
|
export default function MeetTheTeam({ execs }: Props) {
|
|
return (
|
|
<MDXProvider components={{}}>
|
|
<>
|
|
<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.execsDesktop} id="execs">
|
|
{execs.map((exec) => {
|
|
return (
|
|
<div key={exec.metadata.name}>
|
|
<TeamMemberCard {...exec.metadata}>
|
|
<MDXRemote {...exec.content} />
|
|
</TeamMemberCard>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className={styles.programme} id="programme">
|
|
<h2 className={styles.subheading}>Programme Committee</h2>
|
|
<MembersList team={programme} />
|
|
</div>
|
|
<div className={styles.website} id="website">
|
|
<h2 className={styles.subheading}>Website Committee</h2>
|
|
<MembersList team={website} />
|
|
</div>
|
|
<div className={styles.system} id="system">
|
|
<h2 className={styles.subheading}>Systems Committee</h2>
|
|
<MembersList team={systems} />
|
|
</div>
|
|
<Bubble>
|
|
<div className={styles.elections}>
|
|
<h2 className={styles.electionSubheading}>Elections</h2>
|
|
<ElectionContent />
|
|
</div>
|
|
</Bubble>
|
|
</>
|
|
</MDXProvider>
|
|
);
|
|
}
|
|
|
|
interface MembersProps {
|
|
team: Array<Metadata>;
|
|
}
|
|
|
|
function MembersList(props: MembersProps) {
|
|
return (
|
|
<div className={styles.members}>
|
|
{props.team.map((member) => (
|
|
<TeamMember {...member} key={member.name} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// interface MobileExecProps {
|
|
// metadata: Metadata;
|
|
// content: ComponentType;
|
|
// }
|
|
|
|
// interface Propup extends MobileExecProps {
|
|
// handleClose: () => void;
|
|
// }
|
|
|
|
// function MobileExec(props: MobileExecProps) {
|
|
// const [isOpen, setIsOpen] = useState(false);
|
|
// const togglePopup = () => {
|
|
// setIsOpen(!isOpen);
|
|
// };
|
|
// return (
|
|
// <>
|
|
// <button
|
|
// className={styles.reset_button + " " + styles.execButton}
|
|
// onClick={togglePopup}
|
|
// >
|
|
// <TeamMember {...props.metadata} size="medium" />
|
|
// </button>
|
|
// {isOpen && (
|
|
// <>
|
|
// <div className={styles.popup_background} onClick={togglePopup}></div>
|
|
// <ExecPopup
|
|
// metadata={props.metadata}
|
|
// content={props.content}
|
|
// handleClose={togglePopup}
|
|
// />
|
|
// </>
|
|
// )}
|
|
// </>
|
|
// );
|
|
// }
|
|
|
|
// function ExecPopup(props: Propup) {
|
|
// return (
|
|
// <div className={styles.popup_container}>
|
|
// <div className={styles.popup_content}>
|
|
// <button className={styles.reset_button} onClick={props.handleClose}>
|
|
// <Image src="images/team/popup-close.svg" className={styles.close} />
|
|
// </button>
|
|
// <div className={styles.exec}>
|
|
// <TeamMember {...props.metadata} size="medium" />
|
|
// <props.content />
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
export const getStaticProps: GetStaticProps<Props> = async () => {
|
|
const execNames = await getExecNames();
|
|
const execs = (await Promise.all(
|
|
execNames.map((name) => getExecContent(name))
|
|
)) as SerializedExec[];
|
|
|
|
return {
|
|
props: { execs },
|
|
};
|
|
};
|