styling + add placeholders

content/meet-the-team/other.json

@@ -1,7 +1,7 @@
 [
   {
-    "name": "",
-    "role": "",
-    "image": ""
+    "name": "Name Name",
+    "role": "Role",
+    "image": "images/playground/doge.jpg"
   }
 ]

pages/about/team.module.css

@@ -1,21 +1,20 @@
-.container {
-  margin: 0 auto;
-  max-width: calc(806rem / 16);
-  padding: 0 calc(60rem / 16);
-}
-
 .headerContainer {
   display: flex;
   flex-direction: row;
   align-items: center;
+  padding-bottom: calc(24rem / 16);
+  border-bottom: calc(1rem / 16) solid var(--purple-2);
+  margin-bottom: calc(46rem / 16);
+}
+
+.headerTextContainer {
+  margin: auto 0 0 0;
 }
 
 .header {
   color: var(--purple-2);
   font-size: calc(48rem / 16);
-  margin: 0 1rem 0 0;
-  text-align: center;
-  float: left;
+  margin: 0 calc(53rem / 16) 0 0;
 }
 
 .subheading {
@@ -27,6 +26,32 @@
   margin-bottom: calc(46rem / 16);
 }
 
+.codey {
+  width: calc(360rem / 16);
+}
+
+.execs {
+  display: flex;
+  flex-direction: column;
+  gap: calc(26rem / 16);
+  margin-bottom: calc(86rem / 16);
+}
+
+.members {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
+  row-gap: calc(43rem / 16);
+  column-gap: calc(53rem / 16);
+}
+
+.members:last-child {
+  margin-bottom: calc(86rem / 16);
+}
+
+.elections {
+  margin-top: 6rem;
+}
+
 .electionSubheading {
   color: var(--blue-2);
   font-size: calc(36rem / 16);
@@ -35,10 +60,5 @@
 
 .elections > p {
   margin: 0;
-  line-height: calc(30rem / 16);
-}
-
-.codey {
-  width: calc(260rem / 16); 
-  /* 360 makes text appear on 2 lines */
+  line-height: 1.875;
 }

pages/about/team.tsx

@@ -2,31 +2,34 @@ import React, { ReactNode } from "react";
 import { MDXProvider } from "@mdx-js/react";
 import { Image } from "../../components/Image";
 import ElectionContent from "../../content/meet-the-team/elections.mdx";
-import styles from "./team.module.css";
 import { TeamMemberCard } from "../../components/TeamMemberCard";
-// import fs from "fs";
-import { InferGetStaticPropsType } from "next";
-import dynamic from "next/dynamic";
-
-const execsPath = "content/meet-the-team/execs/";
-
-export default function MeetTheTeam(
-  props: InferGetStaticPropsType<typeof getStaticProps>
-) {
-  const components = props.files.map((file) =>
-    dynamic(() => import("../../" + execsPath + file))
-  );
+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 other from "../../content/meet-the-team/other.json";
+import KallenTu, {
+  metadata as KallenMetadata,
+} from "../../content/meet-the-team/execs/Kallen-Tu.team-member.mdx";
 
+export default function MeetTheTeam() {
   return (
     <MDXProvider components={{}}>
-      <div className={styles.container}>
+      <>
         <div className={styles.headerContainer}>
-          <h1 className={styles.header}>Meet the Team!</h1>
+          <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="meet-the-team/team-codey.svg" className={styles.codey} />
         </div>
         <div className={styles.execs}>
-          <h2 className={styles.subheading}>The Executives</h2>
-          {console.log(components)}
           {/* {props.execs.map((exec) => {
             return (
               <div key={exec.metadata.name}>
@@ -36,43 +39,84 @@ export default function MeetTheTeam(
               </div>
             );
           })} */}
+          <TeamMemberCard {...KallenMetadata}>
+            <KallenTu />
+          </TeamMemberCard>
+          <TeamMemberCard {...KallenMetadata}>
+            <KallenTu />
+          </TeamMemberCard>
+          <TeamMemberCard {...KallenMetadata}>
+            <KallenTu />
+          </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.other}>
           <h2 className={styles.subheading}>Other Positions</h2>
+          <MembersList team={other} />
         </div>
         <div className={styles.elections}>
           <h2 className={styles.electionSubheading}>Elections</h2>
           <ElectionContent />
         </div>
-      </div>
+      </>
     </MDXProvider>
   );
 }
 
-interface ExecProps {
-  content: ReactNode;
-  metadata: { name: string; role: string; image?: string };
+interface MembersProps {
+  team: Array<Metadata>;
 }
 
-export async function getStaticProps() {
-  // const execs: ExecProps[] = [];
-  const fs = require("fs");
-  const files = fs.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 } };
+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 } };
+// }