meet the team draft

.vscode/settings.json

@@ -38,5 +38,6 @@
   "files.exclude": {
     "node_modules": true
   },
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "files.eol": "\n"
 }

content/meet-the-team/elections.mdx

@@ -0,0 +1,5 @@
+To find out when and where the next elections will be held, keep an
+eye on on the [News](https://google.com).
+
+For details on the elections, read our
+[Constitution](/about/constitution).

content/meet-the-team/execs/Kallen-Tu.team-member.mdx

@@ -0,0 +1,7 @@
+export const metadata = {
+  name: "Kallen Tu",
+  role: "President",
+  image: "/images/playground/codeyHi.png",
+};
+
+words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words

content/meet-the-team/other.json

@@ -0,0 +1,7 @@
+[
+  {
+    "name": "",
+    "role": "",
+    "image": ""
+  }
+]

content/meet-the-team/programme-committee.json

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

content/meet-the-team/systems-committee.json

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

content/meet-the-team/website-committee.json

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

pages/about/team.mdx

@@ -1 +0,0 @@
-# Meet the Team page

pages/about/team.module.css

@@ -0,0 +1,44 @@
+.container {
+  margin: 0 auto;
+  max-width: calc(806rem / 16);
+  padding: 0 calc(60rem / 16);
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.header {
+  color: var(--purple-2);
+  font-size: calc(48rem / 16);
+  margin: 0 1rem 0 0;
+  text-align: center;
+  float: left;
+}
+
+.subheading {
+  color: var(--purple-2);
+  font-size: calc(36rem / 16);
+  font-weight: 600;
+  padding-bottom: calc(22rem / 16);
+  border-bottom: calc(1rem / 16) solid var(--purple-2);
+  margin-bottom: calc(46rem / 16);
+}
+
+.electionSubheading {
+  color: var(--blue-2);
+  font-size: calc(36rem / 16);
+  font-weight: 600;
+}
+
+.elections > p {
+  margin: 0;
+  line-height: calc(30rem / 16);
+}
+
+.codey {
+  width: calc(260rem / 16); 
+  /* 360 makes text appear on 2 lines */
+}

pages/about/team.tsx

@@ -0,0 +1,78 @@
+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))
+  );
+
+  return (
+    <MDXProvider components={{}}>
+      <div className={styles.container}>
+        <div className={styles.headerContainer}>
+          <h1 className={styles.header}>Meet the Team!</h1>
+          <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}>
+                <TeamMemberCard {...exec.metadata}>
+                  {exec.content}
+                </TeamMemberCard>
+              </div>
+            );
+          })} */}
+        </div>
+        <div className={styles.programme}>
+          <h2 className={styles.subheading}>Programme Committee</h2>
+        </div>
+        <div className={styles.website}>
+          <h2 className={styles.subheading}>Website Committee</h2>
+        </div>
+        <div className={styles.system}>
+          <h2 className={styles.subheading}>Systems Committee</h2>
+        </div>
+        <div className={styles.other}>
+          <h2 className={styles.subheading}>Other Positions</h2>
+        </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 };
+}
+
+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 } };
+}