Redesign volunteerCard

src/pages/Volunteers/VolunteersPage.module.css

@@ -25,11 +25,12 @@
 }
 
 .usersList {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 10px;
+    display: grid;
+    gap: 16px;
+    width: 100%;
+    grid-template-columns: 1fr;
 }
+
 .profileboard {
     width: 100%;
     max-width: 380px; 
@@ -146,6 +147,9 @@
     }
     .usersList {
         gap: 20px;
+        grid-template-columns: repeat(3, 1fr);
+        padding-right: 5em;
+        padding-left: 5em;
     }
     .profileboard {
         max-width: 700px;

src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx

@@ -9,10 +9,21 @@ interface VolunteersCardProps {
 }
 
 export default function VolunteerCard({ user }: VolunteersCardProps) {
+
     const navigate = useNavigate();
 
+    const handleNavigate = (): void => { navigate(`/profile/${user.id}`) }
+
     return (
-        <div>
+        <div className={`glassCard ${styles.volunteerCard}`}>
+            <div className={styles.header}>
+                <img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
+                <p> {user.name} {user.lastname} </p>
+            </div>
+            <div className={styles.content}>
+                <p> {user.email} </p>
+                <Button variant={"primary"} onClick={handleNavigate}>Voir</Button>
+            </div>
         </div>
     );
 }

src/pages/Volunteers/components/VolunteersCard/VolunteersCard.module.css

@@ -0,0 +1,47 @@
+.volunteerCard {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+
+.header p {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+
+.content p {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.content button {
+    flex-shrink: 0;
+}
+
+.profilePicture {
+    background-color: #1d1d1f;
+    border-radius: 20px;
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+}