Merge branch 'main' into sevka

src/App.jsx

@@ -1,25 +1,43 @@
-
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
 import './App.css'
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import FetchUtils from './components/fetchUtils/FetchUtils'
-import BeingPage from "./Components/BeingPage/index.jsx";
+import TableMeets from './components/TableMeets'
-import HomePage from "./Components/HomePage/index.jsx";
-
 
+const events = [
+  {
+    id: 1,
+    date: '10.10.2022',
+    time: '14:00',
+    title: 'Мероприятие 1',
+    speaker: 'Спикер 1',
+    avatar: 'speaker1.jpg',
+    description: 'Описание мероприятия 1',
+    isExpanded: true,
+  },
+  {
+    id: 2,
+    date: '11.10.2022',
+    time: '15:30',
+    title: 'Мероприятие 2',
+    speaker: 'Спикер 2',
+    avatar: 'speaker2.jpg',
+    description: 'Описание мероприятия 2',
+    isExpanded: true,
+  },
+  // Добавьте другие мероприятия сюда
+];
 
 
 
 function App() {
+  const [count, setCount] = useState(0)
 
   return (
     <>
       {/* <FetchUtils /> */}
-      
+      <TableMeets  events={ events } />
-      <BrowserRouter>
-        <Routes>
-          <Route path="/being" element={<BeingPage />}/>
-          <Route path="/" element={<HomePage />}/>
-        </Routes>
-      </BrowserRouter>
     </>
   )
 }

src/Components/BeingPage/index.jsx

@@ -1,10 +0,0 @@
-import React from "react"
-import styles from "./style.module.scss";
-
-const BeingPage = () => {
-    return (
-        <div>Hello world</div>
-    )
-}
-
-export default BeingPage

src/Components/Header/index.jsx

@@ -1,22 +0,0 @@
-
-import styles from './style.module.scss';
-import logo from '../../img/headerImg/OgettoLogo.png';
-import { useNavigate } from "react-router-dom";
-
-const Header = () => {
-    const navigate = useNavigate();
-    const handleHome = () => {
-        navigate('/');
-    }
-
-    return (
-        <div className={styles.header__container}>
-            <header className={styles.header}>
-                <div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
-                <button className={styles.header__button}>Вход</button>
-            </header>
-        </div>
-    )
-
-}
-export default Header;

src/Components/Header/style.module.scss

@@ -1,37 +0,0 @@
-
-
-.header {
-    height: 75px;
-    width: 80%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    &__container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 150px;
-        position: absolute;
-        top: 0px;
-        left: 0px;
-    }
-    &__logo {
-        cursor: pointer;
-    }
-    &__button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 100px;
-        background: #FFED00;
-        width: 200px;
-        height: 42px;
-        color: #000;
-        font-family: Montserrat;
-        font-size: 25px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-    }
-}

src/Components/HomePage/index.jsx

@@ -1,67 +1,29 @@
 import Header from "../Header";
 import styles from "./style.module.scss";
-import TableMeets from '../TableMeets/TableMeets'
+import arrow from '../../img/homePage/downArrow.png';
-import { style } from "@mui/system";
+
-const events = [
+
-    {
-      id: 1,
-      date: '10.10.2022',
-      time: '14:00',
-      title: 'Мероприятие 1',
-      speaker: 'Спикер 1',
-      avatar: 'speaker1.jpg',
-      description: 'Описание мероприятия 1',
-      isExpanded: true,
-    },
-    {
-      id: 2,
-      date: '11.10.2022',
-      time: '15:30',
-      title: 'Мероприятие 2',
-      speaker: 'Спикер 2',
-      avatar: 'speaker2.jpg',
-      description: 'Описание мероприятия 2',
-      isExpanded: true,
-    },
-    // Добавьте другие мероприятия сюда
-  ];
 const HomePage = () => {
     return (
     <>
         <Header></Header>
-        <section className={styles.muza__container}>
-            <div className={styles.muza__title}>МУЗА</div>
-            <div className={styles.muza__descr_container}>
-                <div className={styles.muza__descr}>Платформа для проведения well-being мероприятий</div>
-            </div>
 
-        </section>
+
         <section className={styles.meeting__container}>
-            <input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
+            <div className={styles.meeting__cards}>
-            <div className={styles.container}>
+                <div className={styles.meeting__card}>
-                <div className={styles.select__container}>
+                    <div className={styles.data__container}>
-                    <select className={styles.select} name="time__meeting">
+                        <div className={styles.data__time}>01.01.1990</div>
-                        <option value="">Время мироприятия</option>
+                        <div className={styles.data}>00:00</div>
-                    </select>
-                    <select className={styles.select} name="type__meeting">
-                        <option value="">Тип мероприятия</option>
-                    </select>
                     </div>
+                    <div className={styles.meeting__name}>
+                        Название мероприятия
                     </div>
-            <div className={styles.NewContainer}>
+                    <div className={styles.meeting__downArrow}><img src={arrow} alt="arrow"></img></div>
-                <div className={styles.search_container}>
+                    <div className={styles.blackLine}></div>
-                    <div className={styles.search__descr}>100 мероприятий</div>
-                    <select className={styles.select} name="type__meeting">
-                        <option value="">Тип мероприятия</option>
-                    </select>
                 </div>
             </div>
-            <div className={styles.cards__container}>
-                <div className={styles.card}></div>
-            </div>
         </section>
-
-        
     </>
     
 

src/Components/HomePage/style.module.scss

@@ -1,87 +0,0 @@
-
-
-
-.muza {
-    &__container {
-        height: 700px;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        width: 100%;
-    }
-   
-    &__title {
-        margin-top: 150px;
-        color: #000;
-        font-family: Montserrat;
-        font-size: 143.016px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        text-align: left;
-        display: flex;
-        width: 90%;
-
-    }
-    &__descr {
-        &_container {
-            display: flex;
-            justify-content: flex-end;
-        }
-        margin-top: 50px;
-        margin-left: 70px;
-        color: #000;
-        font-family: Montserrat;
-        font-size: 46px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        text-align: left;
-        display: flex;
-        width: 60%;
-
-    }
-}
-.meeting {
-   &__container {
-    height: 1400px;
-   } 
-   &__inputs {
-        width: 90%;
-        height: 46px;
-        border-radius: 10px;
-        border: 1px solid #000;
-        padding-left: 40px;
-   }
-   
-}
-.container {
-    display: flex;
-    justify-content: center;
-    
-}
-.select {
-    margin-right: 50px;
-    height: 35px;
-    border-radius: 10px;
-    border: 1px solid var(--gray_stroke, #D0D2D8);
-    width: 200px;
-    &__container {
-        display: flex;
-        width: 93%;
-        margin-top: 30px;
-    }
-   }
-.NewContainer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 40px;
-}
-.search_container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.search__descr {
-    margin-right: 25px;
-}

src/Components/TableMeets/style.module.scss

@@ -1,16 +0,0 @@
-.meeting {
-    &__cards {
-        list-style-type: none;
-        width: 80%;
-        padding: 0;
-    }
-    &__container {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    &__arrow {
-        
-    }
-}

src/Components/css/style.module.css

@@ -1 +0,0 @@
-.muza__container{height:700px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.muza__title{margin-top:150px;color:#000;font-family:Montserrat;font-size:143.016px;font-style:normal;font-weight:700;line-height:normal;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;width:90%}.muza__descr{margin-top:50px;margin-left:70px;color:#000;font-family:Montserrat;font-size:46px;font-style:normal;font-weight:400;line-height:normal;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;width:60%}.muza__descr_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.meeting__container{height:1400px}.meeting__inputs{width:90%;height:46px;border-radius:10px;border:1px solid #000;padding-left:40px}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.select{margin-right:50px;height:35px;border-radius:10px;border:1px solid var(--gray_stroke, #D0D2D8);width:200px}.select__container{display:-webkit-box;display:-ms-flexbox;display:flex;width:93%;margin-top:30px}.NewContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:40px}.search_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.search__descr{margin-right:25px}/*# sourceMappingURL=style.module.css.map */

src/Components/css/style.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../HomePage/style.module.scss"],"names":[],"mappings":"AAII,iBACI,YAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,UAAA,CAGJ,aACI,gBAAA,CACA,UAAA,CACA,sBAAA,CACA,mBAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,SAAA,CAGJ,aAKI,eAAA,CACA,gBAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,SAAA,CAdA,uBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,oBAAA,CAAA,iBAAA,CAAA,wBAAA,CAiBT,oBACC,aAAA,CAED,iBACK,SAAA,CACA,WAAA,CACA,kBAAA,CACA,qBAAA,CACA,iBAAA,CAIR,WACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CAGJ,QACI,iBAAA,CACA,WAAA,CACA,kBAAA,CACA,4CAAA,CACA,WAAA,CACA,mBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,SAAA,CACA,eAAA,CAGR,cACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,oBAAA,CAAA,iBAAA,CAAA,wBAAA,CACA,eAAA,CAEJ,kBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CAEJ,eACI,iBAAA","file":"style.module.css"}

src/components/TableMeets.jsx

@@ -1,6 +1,25 @@
 import React, { useState } from 'react';
-import styles from './style.module.scss';
+import styled from 'styled-components';
-import arrow from '../../img/homePage/downArrow.png';
+
+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({});
@@ -13,15 +32,17 @@ const TableMeets = ({ events }) => {
   };
 
   return (
-    <div className={styles.meeting__container}>
+    <Table>
-      <ul className={styles.meeting__cards}>
+      <ul>
         {events.map((event) => (
           <li key={event.id}>
-            <div className={styles.meeting__card}>
+            <div>
-              <span className={styles.date}>{event.date}</span>
+              <Date>{event.date}</Date>
-              <span className={styles.time}>{event.time}</span>
+              <Time>{event.time}</Time>
-              <span className={styles.title}>{event.title}</span>
+              <Name>{event.title}</Name>
-              <div className={styles.meeting__button} onClick={() => toggleDropdown(event.id)}><img className={styles.meeting__arrow} src={arrow} ></img></div>
+              <span>
+                <button onClick={() => toggleDropdown(event.id)}>Показать список мероприятий</button>
+              </span>
               {isOpenMap[event.id] && (
                 <div>
                   <span>{event.speaker}</span>
@@ -33,7 +54,7 @@ const TableMeets = ({ events }) => {
           </li>
         ))}
       </ul>
-    </div>
+    </Table>
   );
 };