Computer Science Club of the University of Waterloo's website. https://csclub.uwaterloo.ca
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
www-new/components/TeamMemberCard.tsx

97 lines
2.0 KiB

import React, { useState } from "react";
import { useWindowDimension } from "@/hooks/useWindowDimension";
import { Image } from "./Image";
import styles from "./TeamMemberCard.module.css";
export interface TeamMemberCardProps {
name: string;
role?: string;
image: string;
children: React.ReactNode;
}
export function TeamMemberCard({
name,
role = "",
image,
children,
}: TeamMemberCardProps) {
const { width } = useWindowDimension();
const [isOpen, setIsOpen] = useState(false);
const handleClick = () => {
if (isOpen || width <= 768) {
setIsOpen(!isOpen);
}
};
return (
<>
<article className={styles.card} onClick={handleClick}>
<TeamMemberInfo {...{ name, role, image }}>{children}</TeamMemberInfo>
</article>
{isOpen && (
<ExecPopup
name={name}
role={role}
image={image}
handleClick={handleClick}
>
{children}
</ExecPopup>
)}
</>
);
}
function TeamMemberInfo({
name,
role = "",
image,
children,
}: TeamMemberCardProps) {
return (
<>
<div className={styles.picture}>
<Image
className={styles.image}
src={image}
alt={`Picture of ${name}`}
/>
</div>
<h1 className={styles.name}>{name}</h1>
<h2 className={styles.role}>{role}</h2>
<div className={styles.description}>{children}</div>
</>
);
}
interface PopupProps extends TeamMemberCardProps {
handleClick: () => void;
}
function ExecPopup({
name,
role = "",
image,
children,
handleClick,
}: PopupProps) {
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}>
<TeamMemberInfo {...{ name, role, image }}>{children}</TeamMemberInfo>
</div>
</div>
</>
);
}