styles

src/App.jsx

@@ -1,7 +1,5 @@
 
 import './App.css'
-import FetchUtils from './components/fetchUtils/FetchUtils'
-import TableMeets from './components/TableMeets'
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import BeingPage from "./Components/BeingPage/index.jsx";
 import HomePage from "./Components/HomePage/index.jsx";

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;

src/components/TableMeets.jsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-let Table = styled.div({
-  width: 1520,
-  border: '1px solid black'
-});
-
-let List = styled.div({
-  display: 'flex',
-  // justifyContent: 'center'
-});
-
-let Date = styled.span({
-  marginRight: 100
-});
-let Time = styled.span({
-  marginRight: 100
-});
-let Name = styled.span({
-    marginRight: 100
-  });
-
-const TableMeets = ({ events }) => {
-  const [isOpenMap, setIsOpenMap] = useState({});
-
-  const toggleDropdown = (eventId) => {
-    setIsOpenMap((prevIsOpenMap) => ({
-      ...prevIsOpenMap,
-      [eventId]: !prevIsOpenMap[eventId]
-    }));
-  };
-
-  return (
-    <Table>
-      <ul>
-        {events.map((event) => (
-          <li key={event.id}>
-            <div>
-              <Date>{event.date}</Date>
-              <Time>{event.time}</Time>
-              <Name>{event.title}</Name>
-              <span>
-                <button onClick={() => toggleDropdown(event.id)}>Показать список мероприятий</button>
-              </span>
-              {isOpenMap[event.id] && (
-                <div>
-                  <span>{event.speaker}</span>
-                  <img src={event.avatar} alt={event.speaker} />
-                  <p>{event.description}</p>
-                </div>
-              )}
-            </div>
-          </li>
-        ))}
-      </ul>
-    </Table>
-  );
-};
-
-export default TableMeets;