www-new/pages/about/team.tsx

142 lines
4.5 KiB
TypeScript

import React from "react";
import { MDXProvider } from "@mdx-js/react";
import { Image } from "../../components/Image";
import ElectionContent from "../../content/meet-the-team/elections.mdx";
import { TeamMemberCard } from "../../components/TeamMemberCard";
import { TeamMember } from "../../components/TeamMember";
import styles from "./team.module.css";
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 KallenTu, {
metadata as KallenMetadata,
} from "../../content/meet-the-team/execs/Kallen-Tu.team-member.mdx";
import GordonLe, {
metadata as GordonMetadata,
} from "../../content/meet-the-team/execs/Gordon-Le.team-member.mdx";
import RavinduAngammana, {
metadata as RavinduMetadata,
} from "../../content/meet-the-team/execs/Ravindu-Angammana.team-member.mdx";
import NeilParikh, {
metadata as NeilMetadata,
} from "../../content/meet-the-team/execs/Neil-Parikh.team-member.mdx";
import MaxErenberg, {
metadata as MaxMetadata,
} from "../../content/meet-the-team/execs/Max-Erenberg.team-member.mdx";
// TODO: get hotdog for elections
// add member info
// get exec info
// mobile
export default function MeetTheTeam() {
return (
<MDXProvider components={{}}>
<>
<div className={styles.headerContainer}>
<div className={styles.headerTextContainer}>
<h1 className={styles.header}>Meet the Team!</h1>
<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}>
{/* {props.execs.map((exec) => {
return (
<div key={exec.metadata.name}>
<TeamMemberCard {...exec.metadata}>
{exec.content}
</TeamMemberCard>
</div>
);
})} */}
<TeamMemberCard {...KallenMetadata}>
<KallenTu />
</TeamMemberCard>
<TeamMemberCard {...GordonMetadata}>
<GordonLe />
</TeamMemberCard>
<TeamMemberCard {...RavinduMetadata}>
<RavinduAngammana />
</TeamMemberCard>
<TeamMemberCard {...NeilMetadata}>
<NeilParikh />
</TeamMemberCard>
<TeamMemberCard {...MaxMetadata}>
<MaxErenberg />
</TeamMemberCard>
</div>
<div className={styles.programme}>
<h2 className={styles.subheading}>Programme Committee</h2>
<MembersList team={programme} />
</div>
<div className={styles.website}>
<h2 className={styles.subheading}>Website Committee</h2>
<MembersList team={website} />
</div>
<div className={styles.system}>
<h2 className={styles.subheading}>Systems Committee</h2>
<MembersList team={systems} />
</div>
<div className={styles.elections}>
<h2 className={styles.electionSubheading}>Elections</h2>
<ElectionContent />
</div>
</>
</MDXProvider>
);
}
interface MembersProps {
team: Array<Metadata>;
}
interface Metadata {
name: string;
role: string;
image?: string;
}
function MembersList(props: MembersProps) {
return (
<div className={styles.members}>
{props.team.map((member) => (
<TeamMember {...member} key={member.name} />
))}
</div>
);
}
// -- Dynamic Import logic --
// import { readdirSync } from "fs";
// import { InferGetStaticPropsType } from "next";
// import dynamic from "next/dynamic";
// const files = readdirSync("content/meet-the-team/execs/")
// const components = files.map((file) =>
// dynamic(() => import("../../" + execsPath + file))
// );
// props: InferGetStaticPropsType<typeof getStaticProps>
// export async function getStaticProps() {
// // const execs: ExecProps[] = [];
// const files = readdirSync(execsPath);
// console.log(files);
// // files.map(async (file: string) => {
// // // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
// // const exec = await import("../../" + execsPath + file);
// // exec.content = <exec.default />;
// // execs.push(exec);
// // });
// return { props: { files } };
// }