generate img path

components/TeamMember.tsx

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

components/TeamMemberCard.tsx

@@ -2,20 +2,15 @@ import React, { useState } from "react";
 import { Image } from "./Image";
 import { useWindowDimension } from "../hooks/useWindowDimension";
 import styles from "./TeamMemberCard.module.css";
+import { getMemberImagePath } from "../lib/team";
 
 export interface TeamMemberCardProps {
   name: string;
   role: string;
-  image?: string; // path to image of person, relative to public directory
   children: React.ReactNode;
 }
 
-export function TeamMemberCard({
+export function TeamMemberCard({ name, role, children }: TeamMemberCardProps) {
-  name,
-  image,
-  role,
-  children,
-}: TeamMemberCardProps) {
   const { width } = useWindowDimension();
   const [isOpen, setIsOpen] = useState(false);
   const handleClick = () => {
@@ -29,7 +24,7 @@ export function TeamMemberCard({
         <div className={styles.picture}>
           <Image
             className={styles.image}
-            src={image ?? "/images/team/team-member-placeholder.svg"}
+            src={getMemberImagePath(name)}
             alt={`Picture of ${name}`}
           />
         </div>
@@ -38,12 +33,7 @@ export function TeamMemberCard({
         <div className={styles.description}>{children}</div>
       </article>
       {isOpen && (
-        <ExecPopup
+        <ExecPopup name={name} role={role} handleClick={handleClick}>
-          name={name}
-          role={role}
-          image={image}
-          handleClick={handleClick}
-        >
           {children}
         </ExecPopup>
       )}
@@ -55,7 +45,7 @@ interface Propup extends TeamMemberCardProps {
   handleClick: () => void;
 }
 
-function ExecPopup({ name, image, role, children, handleClick }: Propup) {
+function ExecPopup({ name, role, children, handleClick }: Propup) {
   return (
     <>
       <div className={styles.popupBackground} onClick={handleClick} />
@@ -67,7 +57,7 @@ function ExecPopup({ name, image, role, children, handleClick }: Propup) {
           <div className={styles.picture}>
             <Image
               className={styles.popupImage}
-              src={image ?? "/images/team/team-member-placeholder.svg"}
+              src={getMemberImagePath(name)}
               alt={`Picture of ${name}`}
             />
           </div>

lib/team.ts

@@ -1,7 +1,7 @@
-import { readFile, readdir } from "fs/promises";
+import { readFile, readdir, access } from "fs/promises";
+import { serialize } from "next-mdx-remote/serialize";
 import path from "path";
 import matter from "gray-matter";
-import { serialize } from "next-mdx-remote/serialize";
 
 const EXECS_PATH = path.join("content", "meet-the-team", "execs");
 const fileType = ".md";
@@ -9,7 +9,6 @@ const fileType = ".md";
 export interface Metadata {
   name: string;
   role: string;
-  image?: string; // path to image of person, relative to public directory
 }
 
 export async function getExecNames() {
@@ -26,3 +25,17 @@ export async function getExec(fileName: string, convert = true) {
     metadata,
   };
 }
+
+export function getMemberImagePath(name: string) {
+  const imgPath = "/images/team/" + name.replace(" ", "") + ".jpg";
+  const placeholder = "/images/team/team-member-placeholder.svg";
+  let img;
+  access(imgPath)
+    .then(() => {
+      img = imgPath;
+    })
+    .catch(() => {
+      img = placeholder;
+    });
+  return img;
+}

types.d.ts

@@ -37,7 +37,6 @@ declare module "*.team-member.mdx" {
   interface TeamMemberMetadata {
     name: string;
     role: string;
-    image?: string;
   }
 
   const ReactComponent: ComponentType;