82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Image } from "./Image";
|
|
import { useWindowDimension } from "../hooks/useWindowDimension";
|
|
import styles from "./TeamMemberCard.module.css";
|
|
|
|
export interface TeamMemberCardProps {
|
|
name: string;
|
|
role: string;
|
|
image?: string; // path to image of person, relative to public directory
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function TeamMemberCard({
|
|
name,
|
|
image,
|
|
role,
|
|
children,
|
|
}: TeamMemberCardProps) {
|
|
const { width } = useWindowDimension();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const handleClick = () => {
|
|
if (width <= 768) {
|
|
setIsOpen(!isOpen);
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
<article className={styles.card} onClick={handleClick}>
|
|
<div className={styles.picture}>
|
|
<Image
|
|
className={styles.image}
|
|
src={image ?? "/images/team/team-member-placeholder.svg"}
|
|
alt={`Picture of ${name}`}
|
|
/>
|
|
</div>
|
|
<h1 className={styles.name}>{name}</h1>
|
|
<h2 className={styles.role}>{role}</h2>
|
|
<div className={styles.description}>{children}</div>
|
|
</article>
|
|
{isOpen && (
|
|
<ExecPopup
|
|
name={name}
|
|
role={role}
|
|
image={image}
|
|
handleClick={handleClick}
|
|
>
|
|
{children}
|
|
</ExecPopup>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
interface Propup extends TeamMemberCardProps {
|
|
handleClick: () => void;
|
|
}
|
|
|
|
function ExecPopup({ name, image, role, children, handleClick }: Propup) {
|
|
return (
|
|
<>
|
|
<div className={styles.popupBackground} onClick={handleClick} />
|
|
<div className={styles.popupContainer}>
|
|
<button className={styles.closeBtn} onClick={handleClick}>
|
|
<Image src="images/team/popup-close.svg" />
|
|
</button>
|
|
<div className={styles.popupContent}>
|
|
<div className={styles.picture}>
|
|
<Image
|
|
className={styles.popupImage}
|
|
src={image ?? "/images/team/team-member-placeholder.svg"}
|
|
alt={`Picture of ${name}`}
|
|
/>
|
|
</div>
|
|
<h1 className={styles.popupName}>{name}</h1>
|
|
<h2 className={styles.popupRole}>{role}</h2>
|
|
<div className={styles.popupDescription}>{children}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|