From 43fe5e361ecd89f7350193820270b045b9a0d28d Mon Sep 17 00:00:00 2001 From: Demi-Play Date: Fri, 22 Dec 2023 21:13:16 +0300 Subject: [PATCH] card --- package-lock.json | 203 +++++++++++++++++++- package.json | 2 + src/Components/HomePage/index.jsx | 8 +- src/Components/TableMeets/TableMeets.jsx | 41 ++-- src/Components/TableMeets/style.module.scss | 35 ++++ src/components/Home/Home.jsx | 30 +++ src/components/Home/style.css | 64 ++++++ 7 files changed, 361 insertions(+), 22 deletions(-) create mode 100644 src/components/Home/Home.jsx create mode 100644 src/components/Home/style.css diff --git a/package-lock.json b/package-lock.json index 9c40582..2aea760 100644 --- 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", diff --git a/package.json b/package.json index 3cb03f6..50c86dd 100644 --- 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": { diff --git a/src/Components/HomePage/index.jsx b/src/Components/HomePage/index.jsx index d9c51dc..9fdec8b 100644 --- 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 ( <> -
- + {/*
+ */} + + {/* */} diff --git a/src/Components/TableMeets/TableMeets.jsx b/src/Components/TableMeets/TableMeets.jsx index a6a35a1..369fa3f 100644 --- 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 ( -
-
    + + + + {events.map((event) => ( -
  • -
    - {event.date} - {event.time} - {event.title} -
    toggleDropdown(event.id)}>
    + + + {event.date} + {event.time} + {event.title} + {isOpenMap[event.id] && ( -
    - {event.speaker} + + {event.speaker} {event.speaker} -

    {event.description}

    -
    + {event.description} +     )} -
    -
    • +     + ))} -
-
+ + + ); }; diff --git a/src/Components/TableMeets/style.module.scss b/src/Components/TableMeets/style.module.scss index e69de29..5a57d59 100644 --- 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; + } \ No newline at end of file diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx new file mode 100644 index 0000000..a43c65b --- /dev/null +++ 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 ( +
+ {/*
*/} +
+
+
+
Психология
+
Предстоящее
+
+

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

+

22 декабря, с 10:00 до 22:00 по Московскому времени

+ +
+
+ ); +} + +export default Home; diff --git a/src/components/Home/style.css b/src/components/Home/style.css new file mode 100644 index 0000000..bb832ef --- /dev/null +++ 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; +} \ No newline at end of file