cardd

src/App.jsx

@@ -1,5 +1,7 @@
 
 import './App.css'
+import FetchUtils from './components/fetchUtils/FetchUtils'
+import TableMeets from './components/fetchUtils/TableMeets.jsx'
 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,10 +1,7 @@
 import Header from "../Header";
 import styles from "./style.module.scss";
 import TableMeets from '../TableMeets/TableMeets'
-// import Home from "../Home/Home";
-// import FetchUtils from "../fetchUtils/FetchUtils";
 
-// import { style } from "@mui/system";
 const events = [
     {
       id: 1,

src/Components/TableMeets/TableMeets.jsx

@@ -1,10 +1,25 @@
 import React, { useState } from 'react';
-import styles from './style.module.scss';
-import logo from '../../img/homePage/downArrow.png';
-import { Container, Grid, Button, Typography } from '@mui/material';
-import { column } from 'stylis';
-import arrow from '../../img/homePage/downArrow.png';
+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({});
@@ -17,41 +32,29 @@ const TableMeets = ({ events }) => {
   };
 
   return (
-
-
-    // <Container className={styles.meeting__container}>
-    //   <Grid sx={{display: 'flex', flexDirection: 'column'}} container className={styles.meeting__cards}>
-    //     {events.map((event) => (
-
-    //       <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>
-
-    //       <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] && (
-    //             <Container>
-    //               <Typography>{event.speaker}</Typography>
-    //               <img src={event.avatar} alt={event.speaker} />
-    //               <Typography>{event.description}</Typography>
-    //             </Container>
-    //           )}
-    //         </Container>
-    //       </Grid>
-    //     ))}
-    //   </Grid>
-    // </Container>
-    <></>
+    <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>
   );
 };
 

src/components/Home/Home.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Header from '../Header';
+// import Header from '../Header';
 import './style.css'
 import styled from 'styled-components';
 
@@ -21,7 +21,6 @@ const Home = () => {
                 </div>
                 <h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
                 <p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
-                
             </div>
         </div>
     );