74 lines
2.6 KiB
React
74 lines
2.6 KiB
React
import React, {useState} from "react";
|
|
import styles from "./VolunteersPage.module.css";
|
|
import formatDate from "../../utils/date/formatDate.js";
|
|
import { useNavigate } from "react-router";
|
|
import Button from "../../components/ui/button/button.jsx";
|
|
|
|
export default function VolunteerCard({ user }) {
|
|
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
const toggleExpand = () => {
|
|
setIsExpanded(!isExpanded);
|
|
};
|
|
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className={`${styles.profileboard} glassCard`}>
|
|
|
|
<div className={styles.header}>
|
|
<h2>{user?.name} {user?.lastname}</h2>
|
|
<Button
|
|
variant={"transparent"}
|
|
onClick={toggleExpand}
|
|
className={`${isExpanded ? styles.moreButtonClicked : ""}`}
|
|
>
|
|
{">"}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={styles.mainContent}>
|
|
{!isExpanded ? (
|
|
<div className={styles.basicInfo}>
|
|
<p><strong>Rôle :</strong> {user?.role}</p>
|
|
<p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
|
|
</div>
|
|
) : (
|
|
<div className={styles.expandedContent}>
|
|
<div className={styles.profilePictureContainer}>
|
|
<img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
|
|
</div>
|
|
|
|
<div className={styles.textInfo}>
|
|
<div className={styles.basicInfo}>
|
|
<p><strong>Rôle :</strong> {user?.role}</p>
|
|
<p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
|
|
</div>
|
|
|
|
<div className={styles.contactInfo}>
|
|
<p><strong>Email :</strong> {user?.email}</p>
|
|
{user?.phone && <p><strong>Téléphone :</strong> {user.phone}</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{isExpanded && (
|
|
<div className={styles.bottomBar}>
|
|
<Button
|
|
onClick={() => navigate(`/profile/${user.id}`)}
|
|
variant="primary"
|
|
>
|
|
Voir plus
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
|
|
|
|
|
|
} |