109 lines
2.9 KiB
React
109 lines
2.9 KiB
React
|
|
import React, { useState } from "react";
|
|
import styles from "./VolunteersPage.module.css";
|
|
|
|
function Volunteer({ name, role, since, email, phone, photo }) {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
const toggleExpand = () => {
|
|
setIsExpanded(!isExpanded);
|
|
};
|
|
|
|
return (
|
|
<div className={`${styles.profileboard} glassCard`}>
|
|
<div className={styles.mainContent}>
|
|
{!isExpanded ? (
|
|
<div className={styles.basicInfo}>
|
|
<h2>{name}</h2>
|
|
<p><strong>Rôle :</strong> {role}</p>
|
|
<p><strong>Membre depuis :</strong> {since}</p>
|
|
</div>
|
|
) : (
|
|
<div className={styles.expandedContent}>
|
|
<div className={styles.profilePictureContainer}>
|
|
<img src={photo} alt={`${name}'s profile`} className={styles.profilePicture} />
|
|
</div>
|
|
<div className={styles.textInfo}>
|
|
<div className={styles.basicInfo}>
|
|
<h2>{name}</h2>
|
|
<p><strong>Rôle :</strong> {role}</p>
|
|
<p><strong>Membre depuis :</strong> {since}</p>
|
|
</div>
|
|
<div className={styles.contactInfo}>
|
|
<p><strong>Email :</strong> {email}</p>
|
|
<p><strong>Téléphone :</strong> {phone}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<button
|
|
className={`${styles.expandButton} glassCard`}
|
|
onClick={toggleExpand}
|
|
>
|
|
{isExpanded ? "▲" : "▼"}
|
|
</button>
|
|
{isExpanded && (
|
|
<div className="voirPlus">
|
|
<a href="#" className={styles.voirPlus}>VOIR PLUS</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function VolunteerPage() {
|
|
const volunteers = [
|
|
{
|
|
name: "LEBLOND Malo",
|
|
role: "Président",
|
|
since: "2019",
|
|
email: "malo.leblond@example.com",
|
|
phone: "08 67 87 32 21",
|
|
photo: "../src/assets/react.svg",
|
|
},
|
|
{
|
|
name: "DUPONT Jean",
|
|
role: "Bénévole",
|
|
since: "2020",
|
|
email: "jean.dupont@example.com",
|
|
phone: "06 12 34 56 78",
|
|
photo: "../src/assets/react.svg",
|
|
},
|
|
{
|
|
name: "MARTIN Sophie",
|
|
role: "Bénévole",
|
|
since: "2021",
|
|
email: "sophie.martin@example.com",
|
|
phone: "06 87 65 43 21",
|
|
photo: "../src/assets/react.svg",
|
|
},
|
|
{
|
|
name: "MARTIN Sophie",
|
|
role: "Bénévole",
|
|
since: "2021",
|
|
email: "sophie.martin@example.com",
|
|
phone: "06 87 65 43 21",
|
|
photo: "../src/assets/react.svg",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{volunteers.map((volunteer, index) => (
|
|
<Volunteer
|
|
key={index}
|
|
name={volunteer.name}
|
|
role={volunteer.role}
|
|
since={volunteer.since}
|
|
email={volunteer.email}
|
|
phone={volunteer.phone}
|
|
photo={volunteer.photo}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VolunteerPage;
|