TeamMemberCard

components/MiniEventCard.module.css

@@ -18,7 +18,7 @@
 }
 
 .info {
-  margin-top: 0;
+  margin-bottom: 0.75rem;
 }
 
 .details {

components/MiniEventCard.tsx

@@ -43,9 +43,9 @@ export const MiniEventCard: React.FC<Props> = ({
             <div>{name}</div>
             <div className={styles.nameSpacer}></div>
           </h2>
-          <p className={styles.info}>
+          <div className={styles.info}>
             <EventSetting date={date} location={location} online={online} />
-          </p>
+          </div>
           <p className={styles.shortDescription}>{short}</p>
         </div>
 

components/TeamMember.tsx

@@ -5,13 +5,21 @@ import { Image } from "./Image";
 interface TeamMemberProps {
   name: string;
   role: string;
-  src: string;
+  image?: string;
 }
 
-export const TeamMember: React.FC<TeamMemberProps> = ({ name, role, src }) => {
+export const TeamMember: React.FC<TeamMemberProps> = ({
+  name,
+  role,
+  image,
+}) => {
   return (
     <div className={styles.container}>
-      <Image className={styles.img} src={src} alt={`${name} | ${role}`} />
+      <Image
+        className={styles.img}
+        src={image ?? "/images/team-member-placeholder.svg"}
+        alt={`Picture of ${name}`}
+      />
       <div className={styles.caption}>
         <div className={styles.name}>{name}</div>
         <div className={styles.role}>{role}</div>

components/TeamMemberCard.module.css

@@ -0,0 +1,114 @@
+.card {
+  display: grid;
+  grid-template-columns: 126px auto;
+  grid-template-areas:
+    "picture name"
+    "picture role"
+    "picture description";
+  column-gap: 2rem;
+  row-gap: 0;
+  justify-items: start;
+  align-items: start;
+
+  max-width: 847px;
+}
+
+.picture {
+  grid-area: picture;
+  justify-self: center;
+
+  max-width: 126px;
+  max-height: 126px;
+
+  clip-path: circle(50%);
+}
+
+.image {
+  width: 100%;
+}
+
+.name {
+  grid-area: name;
+  margin: 0;
+
+  color: var(--blue-1);
+  font-size: 2.25rem;
+  line-height: 1.1;
+  font-weight: 700;
+}
+
+.role {
+  grid-area: role;
+  margin: 0;
+
+  color: var(--purple-2);
+  font-size: 1.5rem;
+  line-height: 1.7;
+  font-weight: 600;
+}
+
+.description {
+  grid-area: description;
+  margin: 0;
+
+  line-height: 1.875;
+}
+
+@media screen and (max-width: 768px) {
+  .card {
+    grid-template-columns: 90px auto;
+    column-gap: 1.375rem;
+
+    max-width: 460px;
+  }
+
+  .picture {
+    max-width: 90px;
+    max-height: 90px;
+  }
+
+  .name,
+  .role,
+  .description {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+}
+
+/* TODO: Use the correct mobile styles from figma
+@media only screen and (max-width: 375px) {
+  .card {
+    grid-template-columns: 70px auto;
+    grid-template-rows: auto calc(0.875rem * 1.5 + 0.75rem) auto;
+    grid-template-areas:
+      "picture name"
+      "picture role"
+      "description description";
+    column-gap: 1.4375rem;
+    align-items: end;
+
+    max-width: 190px;
+  }
+
+  .picture {
+    max-width: 70px;
+    max-height: 70px;
+  }
+
+  .name,
+  .role,
+  .description {
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  .role {
+    margin-bottom: 0.75rem;
+  }
+
+  .description {
+    justify-self: top;
+    margin-top: 0.75rem;
+    margin-left: 0.75rem;
+  }
+} */

components/TeamMemberCard.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Image } from "./Image";
+import styles from "./TeamMemberCard.module.css";
+
+interface TeamMemberCardProps {
+  name: string;
+  role: string;
+  image?: string; // path to image of person, relative to public directory
+  children: React.ReactNode;
+}
+
+export function TeamMemberCard(props: TeamMemberCardProps) {
+  return (
+    <article className={styles.card}>
+      <div className={styles.picture}>
+        <Image
+          className={styles.image}
+          src={props.image ?? "/images/team-member-placeholder.svg"}
+          alt={`Picture of ${props.name}`}
+        />
+      </div>
+      <h1 className={styles.name}>{props.name}</h1>
+      <h2 className={styles.role}>{props.role}</h2>
+      <div className={styles.description}>{props.children}</div>
+    </article>
+  );
+}

components/playground.tsx

@@ -15,13 +15,17 @@ import AltTab, {
 import UnavailableContent, {
   metadata as unavailableMetadata,
 } from "../content/playground/unavailable.news.mdx";
-import { metadata as teamMemberMetadata } from "../content/playground/demo.teammember.mdx";
+import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
+import CodeyInfo, {
+  metadata as codeyMetadata,
+} from "../content/playground/codey.team-member.mdx";
 
 import { MiniEventCard } from "./MiniEventCard";
 import { NewsCard } from "./NewsCard";
 import { EventCard } from "./EventCard";
 import { EventDescriptionCard } from "./EventDescriptionCard";
 import { TeamMember } from "./TeamMember";
+import { TeamMemberCard } from "./TeamMemberCard";
 
 const events = [
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },
@@ -98,17 +102,27 @@ export function TeamMemberDemo() {
       </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} />
+        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} />
       </div>
     </div>
   );
 }
+
+export function TeamMemberCardDemo() {
+  return (
+    <div className={styles.teamMemberCardDemo}>
+      <TeamMemberCard {...codeyMetadata}>
+        <CodeyInfo />
+      </TeamMemberCard>
+    </div>
+  );
+}

content/playground/codey.team-member.mdx

@@ -0,0 +1,9 @@
+export const metadata = {
+  name: "Codey",
+  role: "Mascot",
+  image: "/images/playground/codeyHi.png"
+}
+
+The one, the only, Codey! Codey is ecstatic to be your mascot for this term.
+Codey loves programming and playing on their laptop. You can often find Codey
+posing for event promo graphics, or chilling in the CSC discord.

content/playground/demo.teammember.mdx

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

content/playground/doge.team-member.mdx

@@ -0,0 +1,5 @@
+export const metadata = {
+  name: "Woof Woof",
+  role: "Doge",
+  image: "/images/playground/doge.jpg"
+}

next-env.d.ts

@@ -34,13 +34,13 @@ declare module "*.news.mdx" {
   export default ReactComponent;
 }
 
-declare module "*.teammember.mdx" {
+declare module "*.team-member.mdx" {
   import { ComponentType } from "react";
 
   interface TeamMemberMetadata {
     name: string;
     role: string;
-    src: string;
+    image?: string;
   }
 
   const ReactComponent: ComponentType;

pages/playground.mdx

@@ -3,9 +3,12 @@ import {
   NewsCardDemo,
   EventDescriptionCardDemo,
   EventCardDemo,
-  TeamMemberDemo
+  TeamMemberDemo,
+  TeamMemberCardDemo,
 } from "../components/playground";
 
+import { TeamMemberCard } from "../components/TeamMemberCard";
+
 # Playground
 
 ## `<MiniEventCard />`
@@ -49,3 +52,12 @@ The `<TeamMember />` component has an image of the team member along with their
 It is used on the Meet the Team page for non executive members.
 
 <TeamMemberDemo />
+
+---
+
+## `<TeamMemberCard />`
+
+The `<TeamMemberCard />` component is used on the "Meet the Team!" page to
+display information about the execs: prez, VP, trez, AVP, and syscom overlord.
+
+<TeamMemberCardDemo />

public/images/team-member-placeholder.svg

@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" fill="#5CAFF9" fill-opacity="0.2"/>
+</svg>