@ -1,34 +1,31 @@
import React , { ComponentType , ReactNode , useState } from "react" ;
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" ;
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
export default function MeetTheTeam() {
interface SerializedExec {
content : MDXRemoteSerializeResult ;
metadata : Metadata ;
}
interface Props {
execs : SerializedExec [ ] ;
}
export default function MeetTheTeam ( { execs } : Props ) {
return (
< MDXProvider components = { { } } >
< >
@ -51,37 +48,15 @@ export default function MeetTheTeam() {
< Image src = "images/team/team-codey.svg" className = { styles . codey } / >
< / div >
< div className = { styles . execsDesktop } id = "execs" >
{ / * { p r o p s . e x e c s . m a p ( ( e x e c ) = > {
{ execs . map ( ( exec ) = > {
return (
< div key = { exec . metadata . name } >
< TeamMemberCard { ...exec.metadata } >
{ exec . content }
< MDXRemote { ...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 . execsMobile } id = "execs" >
< MobileExec metadata = { KallenMetadata } content = { KallenTu } / >
< MobileExec metadata = { GordonMetadata } content = { GordonLe } / >
< MobileExec metadata = { RavinduMetadata } content = { RavinduAngammana } / >
< MobileExec metadata = { NeilMetadata } content = { NeilParikh } / >
< MobileExec metadata = { MaxMetadata } content = { MaxErenberg } / >
} ) }
< / div >
< div className = { styles . programme } id = "programme" >
< h2 className = { styles . subheading } > Programme Committee < / h2 >
@ -95,10 +70,12 @@ export default function MeetTheTeam() {
< h2 className = { styles . subheading } > Systems Committee < / h2 >
< MembersList team = { systems } / >
< / div >
< div className = { styles . elections } >
< h2 className = { styles . electionSubheading } > Elections < / h2 >
< ElectionContent / >
< / div >
< Bubble >
< div className = { styles . elections } >
< h2 className = { styles . electionSubheading } > Elections < / h2 >
< ElectionContent / >
< / div >
< / Bubble >
< / >
< / MDXProvider >
) ;
@ -108,21 +85,6 @@ interface MembersProps {
team : Array < Metadata > ;
}
interface Metadata {
name : string ;
role : string ;
image? : string ;
}
interface MobileExecProps {
metadata : Metadata ;
content : ComponentType ;
}
interface Propup extends MobileExecProps {
handleClose : ( ) = > void ;
}
function MembersList ( props : MembersProps ) {
return (
< div className = { styles . members } >
@ -133,72 +95,65 @@ function MembersList(props: MembersProps) {
) ;
}
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 >
) ;
}
// -- Dynamic Import logic --
// interface MobileExecProps {
// metadata: Metadata;
// content: ComponentType;
// }
// import { readdirSync } from "fs";
// import { InferGetStaticPropsType } from "next" ;
// import dynamic from "next/dynamic";
// interface Propup extends MobileExecProps {
// handleClose: () => void;
// }
// const files = readdirSync("content/meet-the-team/execs/")
// 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}
// />
// </>
// )}
// </>
// );
// }
// const components = files.map((file) =>
// dynamic(() => import("../../" + execsPath + file))
// );
// 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>
// );
// }
// props: InferGetStaticPropsType<typeof getStaticProps>
export const getStaticProps : GetStaticProps < Props > = async ( ) = > {
const execNames = await getExecNames ( ) ;
const execs = ( await Promise . all (
execNames . map ( ( name ) = > getExecContent ( name ) )
) ) as SerializedExec [ ] ;
// 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 } };
// }
return {
props : { execs } ,
} ;
} ;
