styles

src/Components/HomePage/index.jsx

@@ -1,6 +1,6 @@
 import Header from "../Header";
 import styles from "./style.module.scss";
-import TableMeets from '../TableMeets'
+import TableMeets from '../TableMeets/TableMeets'
 const events = [
     {
       id: 1,

src/Components/TableMeets/TableMeets.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import styles from './style.module.scss';
+import logo from '../../img/homePage/downArrow.png';
+import { style } from '@mui/system';
+const TableMeets = ({ events }) => {
+  const [isOpenMap, setIsOpenMap] = useState({});
+
+  const toggleDropdown = (eventId) => {
+    setIsOpenMap((prevIsOpenMap) => ({
+      ...prevIsOpenMap,
+      [eventId]: !prevIsOpenMap[eventId]
+    }));
+  };
+
+  return (
+    <div className={styles.meeting__container}>
+      <ul className={styles.meeting__cards}>
+        {events.map((event) => (
+          <li  key={event.id}>
+            <div className={styles.meeting__card}>
+              <span className={styles.date}>{event.date}</span>
+              <span className={styles.time}>{event.time}</span>
+              <span className={styles.title}>{event.title}</span>
+              <div className={styles.meeting__button} onClick={() => toggleDropdown(event.id)}><img src={logo} ></img></div>
+              {isOpenMap[event.id] && (
+                <div>
+                  <span>{event.speaker}</span>
+                  <img src={event.avatar} alt={event.speaker} />
+                  <p>{event.description}</p>
+                </div>
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default TableMeets;