add responsive

src/pages/Profile/ProfilePage.jsx

@@ -1,10 +1,48 @@
+import React, { useState } from "react";
 import styles from "./ProfilePage.module.css";
 
+function Event({ title,date, tasks }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div className={`${styles.event} glassCard`}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+         <div style={{display:'flex', flexDirection:'column'}}>
+          <h3>{title}</h3>
+          <p style={{ fontSize: '0.8rem', color: '#666', margin: '0 0 0 0' }}>{date}</p>
+        </div>
+        <button
+          onClick={toggleExpand}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            fontSize: '1.2rem',
+          }}
+        >
+          {isExpanded ? '▼' : '▶'}
+        </button>
+      </div>
+      <ul
+        className={`${styles.eventTasks} ${isExpanded ? styles.expanded : ''}`}
+      >
+        {tasks.map((task, index) => (
+          <li key={index}>-- {task}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+
 function ProfilePage() {
   return (
     <div className={styles.container}>
       <div className={`${styles.profileboard} glassCard`}>
-        
         <div className={styles.contentWrapper}>
           <div className={styles.profilePictureContainer}>
             <img
@@ -15,43 +53,52 @@ function ProfilePage() {
           </div>
           <div className={styles.description}>
             <h2>LEBLOND Malo</h2>
-
             <div className={styles.topDescription}>
               <div className={styles.infoBlock}>
                 <p><strong>Role :</strong> Président</p>
                 <p><strong>Membre depuis :</strong> 2019</p>
               </div>
-              <div className={styles.infoBlock} >
+              <div className={styles.infoBlock}>
                 <p><strong>Mail :</strong> mailpro@gmail.com</p>
                 <p><strong>Téléphone :</strong> 08 67 87 32 21</p>
               </div>
             </div>
-            <p>..............................................................................................................................................................................................</p>
-            <h2>Vos Evenements :</h2>
-              <div className={`${styles.event} glassCard`}>
-                <h3>Titre event</h3>
-                <ul>
-                  <li>-- Votre tâche 1</li>
-                  <li>-- Votre tâche 2</li>
-                  <li>-- Votre tâche 3</li>
-                </ul>
-              </div>
-              <div className={`${styles.event} glassCard`}>
-                <h3>Titre event</h3>
-                <ul>
-                  <li>-- Votre tâche 1</li>
-                  <li>-- Votre tâche 2</li>
-                  <li>-- Votre tâche 3</li>
-                </ul>
-              </div>
-              <div className={`${styles.event} glassCard`}>
-                <h3>Titre event</h3>
-                <ul>
-                  <li>-- Votre tâche 1</li>
-                  <li>-- Votre tâche 2</li>
-                  <li>-- Votre tâche 3</li>
-                </ul>
-              </div>
+            <h2>Vos Événements :</h2>
+            <Event
+              title="Titre event 1"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 2"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 3"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 4"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 5"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 6"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 7"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
           </div>
         </div>
       </div>
@@ -59,7 +106,4 @@ function ProfilePage() {
   );
 }
 
-
 export default ProfilePage;
-
-