TeamMember

components/TeamMember.module.css

@@ -0,0 +1,29 @@
+.container {
+  max-width: 7.875rem;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+.img {
+  width: 100%;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.caption {
+  text-align: center;
+  font-size: 0.875rem;
+  margin-top: 1.5rem;
+}
+
+.name {
+  font-weight: bold;
+  color: var(--blue-1);
+}
+
+.role {
+  font-weight: 600;
+  color: var(--purple-2);
+  line-height: 1.875;
+}

components/TeamMember.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./TeamMember.module.css";
+import { Image } from "./Image";
+
+interface TeamMemberProps {
+  name: string;
+  role: string;
+  src: string;
+}
+
+export const TeamMember: React.FC<TeamMemberProps> = ({ name, role, src }) => {
+  return (
+    <div className={styles.container}>
+      <Image className={styles.img} src={src} alt={`${name} | ${role}`} />
+      <div className={styles.caption}>
+        <div className={styles.name}>{name}</div>
+        <div className={styles.role}>{role}</div>
+      </div>
+    </div>
+  );
+};

components/playground.module.css

@@ -2,7 +2,7 @@
   background: #e1eefa;
 }
 
-.news {
+.newsDemo {
   padding: 50px;
   background-color: var(--off-white);
   display: inline-block;
@@ -52,8 +52,37 @@
   margin-bottom: 0;
 }
 
+.teamMemberDemo {
+  padding: 10px 50px 30px 50px;
+  max-width: 847px;
+}
+
+.committee {
+  margin: 0;
+  color: var(--purple-2);
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 36px;
+}
+
+.teamMemberDemo > hr {
+  border: none;
+  height: 1px;
+  background-color: var(--blue-2);
+  width: 100%;
+  margin-top: 24px;
+  margin-bottom: 46px;
+}
+
+.teamMembers {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  row-gap: 2.6875rem;
+  column-gap: 3.3125rem;
+}
+
 @media only screen and (max-width: 768px) {
-  .news,
+  .newsDemo,
   .eventDescriptionCardDemo {
     background-color: #e1eefa;
   }

components/playground.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { EventDescriptionCard } from "./EventDescriptionCard";
 
 import styles from "./playground.module.css";
 
@@ -9,9 +8,12 @@ import AfterHoursContent, {
 import UnavailableContent, {
   metadata as unavailableMetadata,
 } from "../content/playground/unavailable.news.mdx";
+import { metadata as teamMemberMetadata } from "../content/playground/demo.teammember.mdx";
 
 import { MiniEventCard } from "./MiniEventCard";
 import { NewsCard } from "./NewsCard";
+import { EventDescriptionCard } from "./EventDescriptionCard";
+import { TeamMember } from "./TeamMember";
 
 export function MiniEventCardDemo() {
   const { name, location, short, date } = afterHoursMetadata;
@@ -58,7 +60,7 @@ export function MiniEventCardDemo() {
 
 export function NewsCardDemo() {
   return (
-    <div className={styles.news}>
+    <div className={styles.newsDemo}>
       <div className={styles.newsTitle}>News</div>
       <div className={styles.newsDesc}>
         Updates from our execs
@@ -111,3 +113,26 @@ export function EventDescriptionCardDemo() {
     </div>
   );
 }
+
+export function TeamMemberDemo() {
+  return (
+    <div className={styles.teamMemberDemo}>
+      <div className={styles.teamMemberHeader}>
+        <h1 className={styles.committee}>Programme Committee</h1>
+      </div>
+      <hr />
+      <div className={styles.teamMembers}>
+        <TeamMember {...teamMemberMetadata} />
+        <TeamMember {...teamMemberMetadata} />
+        <TeamMember {...teamMemberMetadata} />
+        <TeamMember {...teamMemberMetadata} />
+        <TeamMember {...teamMemberMetadata} />
+        <TeamMember {...teamMemberMetadata} />
+        <TeamMember {...teamMemberMetadata} />
+        <TeamMember {...teamMemberMetadata} />
+        <TeamMember {...teamMemberMetadata} />
+        <TeamMember {...teamMemberMetadata} />
+      </div>
+    </div>
+  );
+}

content/playground/demo.teammember.mdx

@@ -0,0 +1,5 @@
+export const metadata = {
+  name: "Name Name",
+  role: "Role",
+  src: "images/playground/team-member.png"
+}

next-env.d.ts

@@ -30,3 +30,18 @@ declare module "*.news.mdx" {
   export const metadata: NewsMetadata;
   export default ReactComponent;
 }
+
+declare module "*.teammember.mdx" {
+  import { ComponentType } from "react";
+
+  interface TeamMemberMetadata {
+    name: string;
+    role: string;
+    src: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: TeamMemberMetadata;
+  export default ReactComponent;
+}

pages/playground.mdx

@@ -2,6 +2,7 @@ import {
   MiniEventCardDemo,
   NewsCardDemo,
   EventDescriptionCardDemo,
+  TeamMemberDemo
 } from "../components/playground";
 
 # Playground
@@ -31,3 +32,9 @@ The `<EventDescriptionCard />` component is used on the home page, and uses the
 <EventDescriptionCardDemo />
 
 ---
+## `<TeamMember />`
+
+The `<TeamMember />` component has an image of the team member along with their name and role. 
+It is used on the Meet the Team page for non executive members.
+
+<TeamMemberDemo />