41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import styles from './style.module.scss';
|
|
import arrow from '../../img/homePage/downArrow.png';
|
|
|
|
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 className={styles.meeting__arrow} src={arrow} ></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;
|