card

2023-12-22 21:13:16 +03:00
parent e0afab1420
commit 43fe5e361e
7 changed files with 361 additions and 22 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,8 @@
        "axios": "^1.6.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.21.1",
+        "sass": "^1.69.5",
        "styled-components": "^6.1.2"
      },
      "devDependencies": {
@@ -1412,6 +1414,14 @@
        "url": "https://opencollective.com/popperjs"
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz",
+      "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.9.1",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.1.tgz",
@@ -1751,6 +1761,18 @@
        "node": ">=4"
      }
    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
    "node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1931,6 +1953,14 @@
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "dev": true
    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1941,6 +1971,17 @@
        "concat-map": "0.0.1"
      }
    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/browserslist": {
      "version": "4.22.2",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
@@ -2036,6 +2077,43 @@
        "node": ">=4"
      }
    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/clsx": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
@@ -2740,6 +2818,17 @@
        "node": "^10.12.0 || >=12.0.0"
      }
    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/find-root": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -2832,7 +2921,6 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "os": [
@@ -3087,6 +3175,11 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3187,6 +3280,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-boolean-object": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -3245,7 +3349,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -3281,7 +3384,6 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
      "dependencies": {
        "is-extglob": "^2.1.1"
      },
@@ -3310,6 +3412,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
    "node_modules/is-number-object": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
@@ -3688,6 +3798,14 @@
      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
      "dev": true
    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3922,6 +4040,17 @@
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.4.32",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
@@ -4044,6 +4173,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz",
+      "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==",
+      "dependencies": {
+        "@remix-run/router": "1.14.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz",
+      "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==",
+      "dependencies": {
+        "@remix-run/router": "1.14.1",
+        "react-router": "6.21.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/react-transition-group": {
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -4059,6 +4218,17 @@
        "react-dom": ">=16.6.0"
      }
    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
    "node_modules/reflect.getprototypeof": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -4235,6 +4405,22 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/scheduler": {
      "version": "0.23.0",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -4499,6 +4685,17 @@
        "node": ">=4"
      }
    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
    "node_modules/tslib": {
      "version": "2.6.2",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
    "axios": "^1.6.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
+    "sass": "^1.69.5",
    "styled-components": "^6.1.2"
  },
  "devDependencies": {
--- a/src/Components/HomePage/index.jsx
+++ b/src/Components/HomePage/index.jsx
@@ -1,6 +1,8 @@
 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";
 const events = [
    {
      id: 1,
@@ -27,8 +29,10 @@ const events = [
 const HomePage = () => {
    return (
    <>
-        <Header></Header>
-        <TableMeets  events={ events } />
+        {/* <Header></Header>
+        <TableMeets  events={ events } /> */}
+        <Home></Home>
+        {/* <FetchUtils></FetchUtils> */}
        
    </>
    
--- a/src/Components/TableMeets/TableMeets.jsx
+++ b/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>
+
  );
 };

--- a/src/Components/TableMeets/style.module.scss
+++ b/src/Components/TableMeets/style.module.scss
@@ -0,0 +1,35 @@
+.container {
+    background: #ffffff;
+    color: #000000;
+    padding: 20px;
+    animation: fade-in 1s ease-in-out;
+  }
+  
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  .title {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  
+  .subtitle {
+    font-size: 18px;
+    font-weight: normal;
+  }
+  
+  .button {
+    background: #000000;
+    color: #ffffff;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    display: inline-block;
+    margin-top: 10px;
+  }
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Header from '../Header';
+import './style.css'
+import styled from 'styled-components';
+
+const Taged = styled.div({
+    borderRadius: 10,
+    backgroundColor: 'gray',
+    
+})
+
+const Home = () => {
+    return (
+        <div>
+            {/* <Header></Header> */}
+            <div className='event_card'>
+                <div className="event-card__photo"></div>
+                <div className="taggs">
+                <div className='tagged'>Психология</div>
+                <div className="feautures">Предстоящее</div>
+                </div>
+                <h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
+                <p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
+                
+            </div>
+        </div>
+    );
+}
+
+export default Home;
--- a/src/components/Home/style.css
+++ b/src/components/Home/style.css
@@ -0,0 +1,64 @@
+.event_card {
+    width: 342px;
+height: 626px;
+flex-shrink: 0;
+}
+
+:root {
+    text-align: left;
+}
+
+.event-card_date {
+    color: var(--gray_text, #888);
+
+/* title */
+font-family: Montserrat;
+font-size: 22px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+}
+
+.event-card_photo {
+    width: 342px;
+height: 340px;
+flex-shrink: 0;
+background: #D9D9D9;
+}
+
+.event-card_title {
+    color: #000;
+
+    font-family: Montserrat;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+.feautures {
+    
+display: flex;
+justify-content: center;
+font-family: Montserrat;
+align-items: center;
+font-size: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+border-radius: 10px;
+background: #E7FFD2;
+}
+
+.tagged {
+    display: inline-flex;
+padding: 10px;
+justify-content: center;
+align-items: center;
+gap: 10px;
+border-radius: 10px;
+border: 1px solid var(--gray_text, #888);
+}
+.taggs {
+    display: flex;
+    justify-content: space-between;
+}