card

src/Components/TableMeets/TableMeets.jsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import styles from './style.module.scss';
 import logo from '../../img/homePage/downArrow.png';
-import { style } from '@mui/system';
+import { Container, Grid, Button, Typography } from '@mui/material';
+import { column } from 'stylis';
+
 const TableMeets = ({ events }) => {
   const [isOpenMap, setIsOpenMap] = useState({});
 
@@ -13,27 +15,32 @@ const TableMeets = ({ events }) => {
   };
 
   return (
-    <div className={styles.meeting__container}>
-      <ul className={styles.meeting__cards}>
+
+
+    <Container className={styles.meeting__container}>
+      <Grid sx={{display: 'flex', flexDirection: 'column'}} container 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>
+          <Grid item key={event.id}>
+            <Container className={styles.meeting__card}>
+              <Typography className={styles.date}>{event.date}</Typography>
+              <Typography className={styles.time}>{event.time}</Typography>
+              <Typography className={styles.title}>{event.title}</Typography>
+              <Button className={styles.meeting__button} onClick={() => toggleDropdown(event.id)}>
+                <img src={logo} alt="Logo" />
+              </Button>
               {isOpenMap[event.id] && (
-                <div>
-                  <span>{event.speaker}</span>
+                <Container>
+                  <Typography>{event.speaker}</Typography>
                   <img src={event.avatar} alt={event.speaker} />
-                  <p>{event.description}</p>
-                </div>
+                  <Typography>{event.description}</Typography>
+                </Container>
               )}
-            </div>
-          </li>
+            </Container>
+          </Grid>
         ))}
-      </ul>
-    </div>
+      </Grid>
+    </Container>
+
   );
 };