Compare commits
33 Commits
sevka
...
dc53f7438f
| Author | SHA1 | Date | |
|---|---|---|---|
|
dc53f7438f | ||
|
|
e6db182439 | ||
c7df4d248f
|
|||
|
|
53af4d2b1b | ||
|
|
e756a3ab23 | ||
|
|
b90a082cc6 | ||
| 3c109d1619 | |||
|
|
949e186112 | ||
|
|
bffd070793 | ||
|
|
2ac1d34f1b | ||
|
|
d344619507 | ||
|
|
a08d4d3cdf | ||
| 9775e7b206 | |||
| 64c4bdae31 | |||
|
|
cc43f228d5 | ||
|
|
8f39b15ab4 | ||
|
|
64317df44c | ||
| 85afad5327 | |||
| 49f3a2be71 | |||
| 4dc1d1a12b | |||
| 3bfd4533b8 | |||
| 41a8372b96 | |||
| ed3bfab8ab | |||
| 3fa127445c | |||
| f508d170e0 | |||
| fdd898a3d9 | |||
| 43fe5e361e | |||
| 0d76b054f1 | |||
| 51e740fba6 | |||
| e0afab1420 | |||
| 80d594d789 | |||
| bb3f49c4ed | |||
| 80d7f405db |
59
.gitea/workflows/gitea-push-docker.yml
Normal file
59
.gitea/workflows/gitea-push-docker.yml
Normal file
@@ -0,0 +1,59 @@
|
||||
name: Create and publish a Docker image
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
env:
|
||||
REGISTRY: git.zetcraft.ru
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
runs-on: ubuntu-latest
|
||||
name: Publish image
|
||||
container: catthehacker/ubuntu:act-latest
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Log in to the Container registry
|
||||
uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
|
||||
with:
|
||||
registry: ${{ env.REGISTRY }}
|
||||
username: ${{ gitea.actor }}
|
||||
password: ${{ secrets.TOKEN }}
|
||||
|
||||
- name: Extract metadata (tags, labels) for Docker
|
||||
id: meta
|
||||
uses: https://github.com/docker/metadata-action@v4
|
||||
with:
|
||||
images: ${{ env.REGISTRY }}/${{ gitea.repository }}
|
||||
|
||||
- name: Build and push Docker image
|
||||
uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
|
||||
with:
|
||||
context: ./
|
||||
push: true
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
deploy:
|
||||
needs: publish
|
||||
name: Deploy image
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: install ssh keys
|
||||
# check this thread to understand why its needed:
|
||||
# <https://stackoverflow.com/a/70447517>
|
||||
run: |
|
||||
install -m 600 -D /dev/null ~/.ssh/id_rsa
|
||||
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
|
||||
ssh-keyscan -H ${{ secrets.SSH_HOST }} > ~/.ssh/known_hosts
|
||||
- name: connect and pull
|
||||
run: ssh ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} "cd ${{ secrets.WORK_DIR }} && docker compose pull && docker compose up -d && docker image prune && exit"
|
||||
- name: cleanup
|
||||
run: rm -rf ~/.ssh
|
||||
17
Dockerfile
Normal file
17
Dockerfile
Normal file
@@ -0,0 +1,17 @@
|
||||
FROM node:20-alpine3.17 AS builder
|
||||
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json .eslintrc.cjs vite.config.js index.html ./
|
||||
COPY public/ public/
|
||||
COPY src/ src/
|
||||
RUN npm ci
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:1.25.2-alpine
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=builder /app/build /usr/share/nginx/html
|
||||
RUN touch /var/run/nginx.pid
|
||||
RUN chown -R nginx:nginx /var/run/nginx.pid /usr/share/nginx/html /var/cache/nginx /var/log/nginx /etc/nginx/conf.d
|
||||
USER nginx
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
27
README.md
27
README.md
@@ -1,8 +1,25 @@
|
||||
# React + Vite
|
||||
# CyberBloomFrontend
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
# Docker
|
||||
|
||||
Currently, two official plugins are available:
|
||||
```bash
|
||||
docker run -d -p 80:80 \
|
||||
--name CyberBloom \
|
||||
--restart=always \
|
||||
-e TZ=Europe/Moscow \
|
||||
git.zetcraft.ru/cyberbloom/ogeetocasecybergarden:main
|
||||
```
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
# Docker Compose
|
||||
|
||||
```yml
|
||||
services:
|
||||
cyberbloomfrontend:
|
||||
ports:
|
||||
- '80:80'
|
||||
container_name: CyberBloom
|
||||
restart: always
|
||||
environment:
|
||||
- TZ=Europe/Moscow
|
||||
image: 'git.zetcraft.ru/cyberbloom/ogeetocasecybergarden:main'
|
||||
```
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;1,500&family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
9
nginx.conf
Normal file
9
nginx.conf
Normal file
@@ -0,0 +1,9 @@
|
||||
server_tokens off;
|
||||
server {
|
||||
listen 80;
|
||||
location / {
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
try_files $uri /index.html;
|
||||
}
|
||||
}
|
||||
284
package-lock.json
generated
284
package-lock.json
generated
@@ -14,9 +14,14 @@
|
||||
"@mui/icons-material": "^5.15.1",
|
||||
"@mui/material": "^5.15.1",
|
||||
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
|
||||
"@mui/x-date-pickers": "^6.18.6",
|
||||
"axios": "^1.6.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"js-cookie": "^3.0.5",
|
||||
"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": {
|
||||
@@ -1368,6 +1373,71 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
},
|
||||
"node_modules/@mui/x-date-pickers": {
|
||||
"version": "6.18.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.18.6.tgz",
|
||||
"integrity": "sha512-pqOrGPUDVY/1xXrM1hofqwgquno/SB9aG9CVS1m2Rs8hKF1VWRC+jYlEa1Qk08xKmvkia5g7NsdV/BBb+tHUZw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.2",
|
||||
"@mui/base": "^5.0.0-beta.22",
|
||||
"@mui/utils": "^5.14.16",
|
||||
"@types/react-transition-group": "^4.4.8",
|
||||
"clsx": "^2.0.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.9.0",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/material": "^5.8.6",
|
||||
"@mui/system": "^5.8.0",
|
||||
"date-fns": "^2.25.0",
|
||||
"date-fns-jalali": "^2.13.0-0",
|
||||
"dayjs": "^1.10.7",
|
||||
"luxon": "^3.0.2",
|
||||
"moment": "^2.29.4",
|
||||
"moment-hijri": "^2.1.2",
|
||||
"moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns-jalali": {
|
||||
"optional": true
|
||||
},
|
||||
"dayjs": {
|
||||
"optional": true
|
||||
},
|
||||
"luxon": {
|
||||
"optional": true
|
||||
},
|
||||
"moment": {
|
||||
"optional": true
|
||||
},
|
||||
"moment-hijri": {
|
||||
"optional": true
|
||||
},
|
||||
"moment-jalaali": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@@ -1412,6 +1482,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 +1829,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 +2021,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 +2039,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 +2145,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",
|
||||
@@ -2132,6 +2278,11 @@
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.10",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
|
||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
@@ -2740,6 +2891,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 +2994,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 +3248,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 +3353,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 +3422,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 +3457,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 +3485,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",
|
||||
@@ -3475,6 +3658,14 @@
|
||||
"set-function-name": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/js-cookie": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
|
||||
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@@ -3688,6 +3879,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 +4121,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 +4254,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 +4299,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 +4486,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 +4766,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",
|
||||
|
||||
@@ -16,9 +16,15 @@
|
||||
"@mui/icons-material": "^5.15.1",
|
||||
"@mui/material": "^5.15.1",
|
||||
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
|
||||
"@mui/x-date-pickers": "^6.18.6",
|
||||
"axios": "^1.6.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"js-cookie": "^3.0.5",
|
||||
|
||||
"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": {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
width: 79%;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
|
||||
55
src/App.jsx
55
src/App.jsx
@@ -1,43 +1,38 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
|
||||
import './App.css'
|
||||
import FetchUtils from './components/fetchUtils/FetchUtils'
|
||||
import TableMeets from './components/TableMeets'
|
||||
|
||||
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,
|
||||
},
|
||||
// Добавьте другие мероприятия сюда
|
||||
];
|
||||
// import FetchUtils from './components/utils/FetchUtils.jsx'
|
||||
|
||||
// import FetchUtils from './components/fetchUtils/FetchUtils.jsx'
|
||||
|
||||
// import TableMeets from './components/fetchUtils/TableMeets.jsx'
|
||||
import AddUsers from './Components/AddUsersPage/index.jsx'
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import HomePage from "./Components/HomePage/index.jsx";
|
||||
import MeetPage from "./Components/MeetPage/index.jsx";
|
||||
import MeetAuthPage from "./Components/MeetAuthPage/index.jsx";
|
||||
import ProfilePage from './Components/profilePage/index.jsx';
|
||||
import MeetAuthPageAdmin from './Components/MeetAuthPageAdmin/index.jsx'
|
||||
import HomeAuthPageAdmin from './Components/HomePageAdmin/index.jsx'
|
||||
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <FetchUtils /> */}
|
||||
<TableMeets events={ events } />
|
||||
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/addUser" element={<AddUsers />}/>
|
||||
<Route path="/" element={<HomePage />}/>
|
||||
<Route path="/firstMeet" element={<MeetPage />}/>
|
||||
<Route path="/firstMeetAuth" element={<MeetAuthPage />}/>
|
||||
<Route path='/profile' element={<ProfilePage />}/>
|
||||
<Route path='/adminMeets' element={<MeetAuthPageAdmin/>}/>
|
||||
<Route path='/admin' element={<HomeAuthPageAdmin/>}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
154
src/Components/AddUsersPage/index.jsx
Normal file
154
src/Components/AddUsersPage/index.jsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import styles from './style.module.scss';
|
||||
import { useState } from 'react';
|
||||
import avatar from '../../img/profilePage/avatar.png';
|
||||
import Header from '../Header';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Box from '@mui/material/Box';
|
||||
import del from '../../img/AddUsers/delete.png';
|
||||
import perm from '../../img/AddUsers/permission.png';
|
||||
import newAvatar from '../../img/AddUsers/newAvatar.png';
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: "46%",
|
||||
height: "60vh",
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: '25px',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
const AddUsers = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
return (
|
||||
<>
|
||||
<Header></Header>
|
||||
|
||||
|
||||
<section className={styles.addUsers__container}>
|
||||
<input className={styles.addUsers__search} type='text' placeholder='Найти мероприятие'></input>
|
||||
<div className={styles.select__container}>
|
||||
<select className={styles.select} name="time__meeting">
|
||||
<option value="">роль пользователя</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div className={styles.addUser__container}>
|
||||
<div className={styles.addUser__cards_container}>
|
||||
<div className={styles.addUser__card_container}>
|
||||
<div onClick={handleOpen} className={styles.round}>+</div>
|
||||
<div className={styles.addUser__card_text}>Добавить пользователя</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_container}>
|
||||
<div className={styles.profile__user_img_container}>
|
||||
<img src={avatar} className={styles.profile__user_img}></img>
|
||||
<div className={styles.profile__user_role}>Участник</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_info_container}>
|
||||
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||
<div className={styles.profile__user_progress_container}>
|
||||
<span>0</span>
|
||||
<span className={styles.profile__user_progress_line}></span>
|
||||
<span>1</span>
|
||||
|
||||
</div>
|
||||
<div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
|
||||
<div className={styles.feautures}>Отправлено</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_container}>
|
||||
<div className={styles.profile__user_img_container}>
|
||||
<img src={avatar} className={styles.profile__user_img}></img>
|
||||
<div className={styles.profile__user_role}>Участник</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_info_container}>
|
||||
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||
<div className={styles.profile__user_progress_container}>
|
||||
<span>0</span>
|
||||
<span className={styles.profile__user_progress_line}></span>
|
||||
<span>1</span>
|
||||
|
||||
</div>
|
||||
<div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
|
||||
<div className={styles.permission_container}><img src={perm} className={styles.permission_img}></img></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_container}>
|
||||
<div className={styles.profile__user_img_container}>
|
||||
<img src={avatar} className={styles.profile__user_img}></img>
|
||||
<div className={styles.profile__user_role}>Участник</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_info_container}>
|
||||
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||
<div className={styles.profile__user_progress_container}>
|
||||
<span>0</span>
|
||||
<span className={styles.profile__user_progress_line}></span>
|
||||
<span>1</span>
|
||||
|
||||
</div>
|
||||
<div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
|
||||
<div className={styles.permission_container}><img src={perm} className={styles.permission_img}></img></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<div className={styles.addModal__title_container}>
|
||||
<div className={styles.addModal__title}>Добавление пользователя</div>
|
||||
<div onClick={handleClose} className={styles.addModal__close}><div className={styles.addModal__close_img}>+</div></div>
|
||||
</div>
|
||||
<div className={styles.addModal_user_container}>
|
||||
<div className={styles.addModal_user_img_container}>
|
||||
<form className={styles.addModal_form} method="post" encType="multipart/form-data">
|
||||
<div className={styles.input_file_row}>
|
||||
<label className={styles.input_file}>
|
||||
<input type="file" name="file[]" multiple accept="image/*"/>
|
||||
<span><img src={newAvatar}></img></span>
|
||||
</label>
|
||||
<div className={styles.input_file_list}></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className={styles.addModal_user_input_container}>
|
||||
<input placeholder='ФИО специалиста' className={styles.addModal_user}></input>
|
||||
<input placeholder='Должность' className={styles.addModal_user}></input>
|
||||
<select className={styles.addModal_user_select}>
|
||||
<option>Пользователь</option>
|
||||
<option>Администратор</option>
|
||||
</select>
|
||||
<input placeholder='Почта' className={styles.addModal_user}></input>
|
||||
<input placeholder='TG' className={styles.addModal_user}></input>
|
||||
<div className={styles.modal__question_button_container}>
|
||||
<button className={styles.modal__question_button + ' ' + styles.yellow}>Добавить</button>
|
||||
<button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</section>
|
||||
|
||||
</>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
export default AddUsers;
|
||||
538
src/Components/AddUsersPage/style.module.scss
Normal file
538
src/Components/AddUsersPage/style.module.scss
Normal file
@@ -0,0 +1,538 @@
|
||||
.select {
|
||||
margin-right: 50px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 200px;
|
||||
padding-left: 10px;
|
||||
option {
|
||||
padding-left: 10px;
|
||||
}
|
||||
&__container {
|
||||
display: flex;
|
||||
width: 93%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.addUsers {
|
||||
|
||||
|
||||
&__search {
|
||||
margin-top: 150px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
.profile {
|
||||
&__container {
|
||||
margin-top: 200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
}
|
||||
&__user {
|
||||
&_img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
&_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
&_container {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
margin-bottom: 110px;
|
||||
position: relative;
|
||||
}
|
||||
&_info_container {
|
||||
text-align: left;
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
}
|
||||
&_fullName {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 26px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
span {
|
||||
color: #FD0;
|
||||
}
|
||||
|
||||
}
|
||||
&_spaciality {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_socialMedia {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_email {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_role {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
margin-top: 20px;
|
||||
}
|
||||
&_progress {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
&_line {
|
||||
height: 2px;
|
||||
width: 140%;
|
||||
background: linear-gradient(90deg, #ffdd00,#d0d2d8);
|
||||
padding: 0 30px 0 30px;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.addUser {
|
||||
|
||||
|
||||
&__cards_container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 120px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
&__card {
|
||||
|
||||
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 48%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
margin-bottom: 110px;
|
||||
}
|
||||
&_text {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.round {
|
||||
cursor: pointer;
|
||||
border-radius: 80%;
|
||||
height: 50px;
|
||||
border: 1px solid var(--yellow, #FD0);
|
||||
background: var(--yellow, #FD0);
|
||||
width: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.feautures {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: Montserrat;
|
||||
align-items: center;
|
||||
color: #60AD1E;
|
||||
font-family: Montserrat;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
background: #E7FFD2;
|
||||
height: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
.permission {
|
||||
|
||||
|
||||
&_container {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 40px;
|
||||
}
|
||||
&_img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.delete {
|
||||
|
||||
|
||||
&_container {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
}
|
||||
&_img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.addModal {
|
||||
|
||||
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
height: 96px;
|
||||
height: 45px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 78.625px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
top: 13px;
|
||||
right: 50px;
|
||||
}
|
||||
&__title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&_form {
|
||||
margin-top: 100px;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
}
|
||||
&_user {
|
||||
border-radius: 7.794px;
|
||||
border: 0.779px solid var(--gray_stroke, #D0D2D8);
|
||||
height: 35px;
|
||||
width: 200px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
&_select {
|
||||
border-radius: 7.794px;
|
||||
border: 0.779px solid var(--gray_stroke, #D0D2D8);
|
||||
height: 40px;
|
||||
width: 210px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
&_input_container {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 100px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
&_container {
|
||||
height: 96%;
|
||||
|
||||
display: flex;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.input_file_row {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.input_file {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.input_file span {
|
||||
margin-top: 159px;
|
||||
padding-top: 200px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
color: rgb(255 255 255);
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
line-height: 22px;
|
||||
height: 40px;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
margin: 0;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.input_file input[type=file] {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
// .input_file input[type=file]:focus + span {
|
||||
// box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
||||
// }
|
||||
|
||||
/* Hover/active */
|
||||
|
||||
|
||||
/* Disabled */
|
||||
|
||||
|
||||
/* Список c превью */
|
||||
.input_file_list {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.input_file_list_item {
|
||||
display: inline-block;
|
||||
margin: 0 15px 15px;
|
||||
width: 150px;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
.input_file_list_item img {
|
||||
width: 150px;
|
||||
}
|
||||
.input_file_list_name {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.input_file_list_remove {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background: #ff0202;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.modal {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
width: 300px;
|
||||
&__container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 5000px;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
&__title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
stroke-width: 1px;
|
||||
background-color: #D0D2D8;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
height: 96px;
|
||||
height: 45px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 58.625px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
top: 0px;
|
||||
right: 50px;
|
||||
}
|
||||
&__question {
|
||||
&_number {
|
||||
margin-top: 50px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
span {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_container {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&_containerSecond {
|
||||
width: 48%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
&_user {
|
||||
&_img {
|
||||
margin-right: 25px;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items:center;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
&_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
&_like {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px 0 0 10px;
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
&_input {
|
||||
margin-top: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 100%;
|
||||
height: 235px;
|
||||
padding-top: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
&_containerThird {
|
||||
margin-right: 3%;
|
||||
}
|
||||
&_button {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yellow {
|
||||
border-radius: 10px;
|
||||
background-color: #60AD1E;
|
||||
width: 190px;
|
||||
height: 50px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.gray {
|
||||
border-radius: 10px;
|
||||
background: var(--gray_stroke, #D0D2D8);
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
}
|
||||
10
src/Components/BeingPage/index.jsx
Normal file
10
src/Components/BeingPage/index.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from "react"
|
||||
import styles from "./style.module.scss";
|
||||
|
||||
const BeingPage = () => {
|
||||
return (
|
||||
<div>Hello world</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BeingPage
|
||||
1
src/Components/BeingPage/style.module.css
Normal file
1
src/Components/BeingPage/style.module.css
Normal file
@@ -0,0 +1 @@
|
||||
/*# sourceMappingURL=style.module.css.map */
|
||||
1
src/Components/BeingPage/style.module.css.map
Normal file
1
src/Components/BeingPage/style.module.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":[],"names":[],"mappings":"","file":"style.module.css"}
|
||||
0
src/Components/BeingPage/style.module.scss
Normal file
0
src/Components/BeingPage/style.module.scss
Normal file
16
src/Components/Calendar/index.jsx
Normal file
16
src/Components/Calendar/index.jsx
Normal file
@@ -0,0 +1,16 @@
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
|
||||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
|
||||
|
||||
export default function DateCalendarFormProps() {
|
||||
return (
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DemoContainer components={['DateCalendar']}>
|
||||
<DateCalendar defaultValue={dayjs('2023-12-24')} readOnly />
|
||||
</DemoContainer>
|
||||
</LocalizationProvider>
|
||||
);
|
||||
}
|
||||
34
src/Components/Card/index.jsx
Normal file
34
src/Components/Card/index.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import './style.module.scss';
|
||||
|
||||
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
const httpApiMethods = new HttpApiMethods()
|
||||
function extractDateTime(dateString) {
|
||||
const dateTime = new Date(dateString);
|
||||
const date = dateTime.toLocaleDateString();
|
||||
const time = dateTime.toLocaleTimeString();
|
||||
|
||||
return { date, time };
|
||||
}
|
||||
|
||||
|
||||
|
||||
const Card = (item) => {
|
||||
|
||||
console.log(item);
|
||||
return (
|
||||
<>
|
||||
<div className='event_card' >
|
||||
<div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||
<div className="taggs">
|
||||
<div className='tagged'>{item.tags}</div>
|
||||
<div className="feautures">{item.type}</div>
|
||||
</div>
|
||||
<h4 className="event-card__title">{item.title}</h4>
|
||||
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Card;
|
||||
73
src/Components/Card/style.module.css
Normal file
73
src/Components/Card/style.module.css
Normal file
@@ -0,0 +1,73 @@
|
||||
.event_card {
|
||||
width: 292px;
|
||||
height: 626px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.wrapp {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
/* max-width: 1521px; */
|
||||
}
|
||||
|
||||
: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: 292px;
|
||||
height: 340px;
|
||||
flex-shrink: 0;
|
||||
background: #D9D9D9;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.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: 8px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
border-radius: 10px;
|
||||
background: #E7FFD2;
|
||||
height: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}/*# sourceMappingURL=style.module.css.map */
|
||||
1
src/Components/Card/style.module.css.map
Normal file
1
src/Components/Card/style.module.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["style.module.scss","style.module.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,2BAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;EACI,6BAAA;EAEJ,UAAA;EACA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;ACAA;;ADGA;EACI,YAAA;EACA,aAAA;EACA,cAAA;EACJ,mBAAA;EACA,mBAAA;ACAA;;ADGA;EACI,WAAA;EAEA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;ACDJ;;ADGA;EAEA,aAAA;EACA,uBAAA;EACA,uBAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;ACDA;;ADIA;EACI,oBAAA;EACJ,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,SAAA;EACA,mBAAA;EACA,wCAAA;ACDA;;ADGA;EACI,aAAA;EACA,8BAAA;ACAJ","file":"style.module.css"}
|
||||
74
src/Components/Card/style.module.scss
Normal file
74
src/Components/Card/style.module.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
.event_card {
|
||||
width: 292px;
|
||||
height: 626px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.wrapp {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
/* max-width: 1521px; */
|
||||
}
|
||||
|
||||
: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: 292px;
|
||||
height: 340px;
|
||||
flex-shrink: 0;
|
||||
background: #D9D9D9;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.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: 8px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
border-radius: 10px;
|
||||
background: #E7FFD2;
|
||||
height: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
48
src/Components/Header/index.jsx
Normal file
48
src/Components/Header/index.jsx
Normal file
@@ -0,0 +1,48 @@
|
||||
|
||||
import styles from './style.module.scss';
|
||||
import logo from '../../img/headerImg/header.png';
|
||||
import google from '../../img/headerImg/google.png';
|
||||
|
||||
import icon from '../../img/headerImg/Icon.png';
|
||||
import Menu from '../Menu'
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
const Header = () => {
|
||||
const navigate = useNavigate();
|
||||
const handleHome = () => {
|
||||
navigate('/');
|
||||
}
|
||||
const isAuth = useState(true)[0];
|
||||
console.log(isAuth)
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{(isAuth ? (
|
||||
<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>
|
||||
<div className={styles.header_img_container}> <img className={styles.header_img} src={icon}></img> <Menu></Menu></div>
|
||||
</header>
|
||||
</div>
|
||||
) :
|
||||
(
|
||||
<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}>ВХОД <img className={styles.header__button_img} src={google}></img></button>
|
||||
</header>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
export default Header;
|
||||
46
src/Components/Header/style.module.scss
Normal file
46
src/Components/Header/style.module.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
|
||||
|
||||
.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: fixed;
|
||||
top: 0px;
|
||||
background-color: #fff;
|
||||
left: 0px;
|
||||
z-index: 20;
|
||||
}
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
}
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: #FFED00;
|
||||
width: 200px;
|
||||
height: 42px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
&_img {
|
||||
|
||||
width: 55px;
|
||||
margin-right: 40px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,29 +1,92 @@
|
||||
import Header from "../Header";
|
||||
import styles from "./style.module.scss";
|
||||
import arrow from '../../img/homePage/downArrow.png';
|
||||
import TableMeets from '../TableMeets/TableMeets'
|
||||
// import EditForm from "../edit/EditMeetsForm";
|
||||
import PostForm from "../post/Meets";
|
||||
import Users from "../post/Users";
|
||||
// import User from "../get/User";
|
||||
import Questions from "../post/Questions";
|
||||
import { GetQuestions } from "../get/Questions";
|
||||
|
||||
|
||||
import muza from '../../img/homePage/muza.png';
|
||||
const APIURL = ''
|
||||
|
||||
// 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>
|
||||
<div className={styles.muza_img_container}><img src={muza} alt='muza' className={styles.muza_img}></img></div>
|
||||
<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 className={styles.meeting__container}>
|
||||
<div className={styles.meeting__cards}>
|
||||
<div className={styles.meeting__card}>
|
||||
<div className={styles.data__container}>
|
||||
<div className={styles.data__time}>01.01.1990</div>
|
||||
<div className={styles.data}>00:00</div>
|
||||
</div>
|
||||
<div className={styles.meeting__name}>
|
||||
Название мероприятия
|
||||
</div>
|
||||
<div className={styles.meeting__downArrow}><img src={arrow} alt="arrow"></img></div>
|
||||
<div className={styles.blackLine}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className={styles.meeting__container}>
|
||||
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.select__container}>
|
||||
<select className={styles.select} name="time__meeting">
|
||||
<option value="">Время мироприятия</option>
|
||||
</select>
|
||||
<select className={styles.select} name="type__meeting">
|
||||
<option value="">Тип мероприятия</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.NewContainer}>
|
||||
<div className={styles.search_container}>
|
||||
<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>
|
||||
{/* <Questions></Questions> */}
|
||||
{/* <Home></Home> */}
|
||||
{/* <FetchUtils></FetchUtils> */}
|
||||
{/* <PostForm /> */}
|
||||
{/* <EditForm /> */}
|
||||
{/* <Users></Users> */}
|
||||
{/* <User></User> */}
|
||||
{/* <GetQuestions></GetQuestions> */}
|
||||
<Users></Users>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
|
||||
|
||||
|
||||
96
src/Components/HomePage/style.module.scss
Normal file
96
src/Components/HomePage/style.module.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.muza {
|
||||
&__container {
|
||||
height: 780px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
&_img {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 300px;
|
||||
height: 480px;
|
||||
}
|
||||
&__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%;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
&__descr {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
margin-top: 100px;
|
||||
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%;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.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: 30px;
|
||||
}
|
||||
.search_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.search__descr {
|
||||
margin-right: 25px;
|
||||
}
|
||||
85
src/Components/HomePageAdmin/index.jsx
Normal file
85
src/Components/HomePageAdmin/index.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import Header from "../Header";
|
||||
import styles from "./style.module.scss";
|
||||
import TableMeets from '../TableMeets/TableMeets'
|
||||
// import Home from "../Home/Home";
|
||||
// import FetchUtils from "../utils/FetchUtils";
|
||||
// import EditForm from "../edit/EditForm";
|
||||
// import PostForm from "../post/PostForm";
|
||||
// import GetMeets from '../get/Meets';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
const APIURL = ''
|
||||
|
||||
// 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 = () => {
|
||||
const navigate = useNavigate();
|
||||
const handleMeet = () => {
|
||||
navigate('/adminMeets');
|
||||
}
|
||||
return (
|
||||
<>
|
||||
|
||||
<Header></Header>
|
||||
<section className={styles.muza__container}>
|
||||
<button onClick={handleMeet} className={styles.muza__container_button}>Создать мероприятие</button>
|
||||
|
||||
</section>
|
||||
<section className={styles.meeting__container}>
|
||||
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.select__container}>
|
||||
<select className={styles.select} name="time__meeting">
|
||||
<option value="">Время мироприятия</option>
|
||||
</select>
|
||||
<select className={styles.select} name="type__meeting">
|
||||
<option value="">Тип мероприятия</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.NewContainer}>
|
||||
<div className={styles.search_container}>
|
||||
<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>
|
||||
{/* <Home></Home> */}
|
||||
{/* <FetchUtils></FetchUtils> */}
|
||||
{/* <PostForm /> */}
|
||||
{/* <EditForm /> */}
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
export default HomePage;
|
||||
102
src/Components/HomePageAdmin/style.module.scss
Normal file
102
src/Components/HomePageAdmin/style.module.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.muza {
|
||||
&__container {
|
||||
height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
&_button {
|
||||
margin-top: 200px;
|
||||
border-radius: 15px;
|
||||
background: var(--linear, #FD0);
|
||||
width: 60%;
|
||||
height: 130px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&__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: 30px;
|
||||
}
|
||||
.search_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.search__descr {
|
||||
margin-right: 25px;
|
||||
}
|
||||
263
src/Components/MeetAuthPage/index.jsx
Normal file
263
src/Components/MeetAuthPage/index.jsx
Normal file
@@ -0,0 +1,263 @@
|
||||
import Header from "../Header";
|
||||
import styles from './style.module.scss';
|
||||
import clock from '../../img/MeetPage/Clock.png';
|
||||
import globe from '../../img/MeetPage/Globe.png';
|
||||
import avatar from '../../img/MeetPage/avatar.png';
|
||||
import like from '../../img/MeetPage/Facebook.png';
|
||||
import Card from "../Card";
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
// import { useState, CSSProperties, useEffect, useRef } from "react";
|
||||
import newAvatar from '../../img/MeetPage/newAvatar.png';
|
||||
import vk from '../../img/MeetPage/Vk.png';
|
||||
import tg from '../../img/MeetPage/Telegram.png';
|
||||
import book from '../../img/MeetPage/Book.png';
|
||||
import * as React from 'react';
|
||||
import Modal from '@mui/material/Modal';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: "56%",
|
||||
height: "80vh",
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: '25px',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
const MeetPage = () => {
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Header></Header>
|
||||
|
||||
<section className={styles.meets}>
|
||||
<div className={styles.meets__mainInfo_container}>
|
||||
<span className={styles.meets__mainInfo_descr}>Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</span>
|
||||
<span className={styles.meets__mainInfo_type}>Психология</span>
|
||||
<div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
|
||||
<div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
|
||||
</div>
|
||||
<div className={styles.meets__img}></div>
|
||||
|
||||
</section>
|
||||
<div className={styles.container}>
|
||||
|
||||
<div className={styles.meets__otziv_container}>
|
||||
<div className={styles.newMeeting__container}>
|
||||
<button className={styles.newMeeting__button}>ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ</button>
|
||||
<a href="#" className={styles.newMeeting__link}>Ссылка на мероприятие</a>
|
||||
<a href="#" className={styles.newMeeting__ling_video}>СКАЧАТЬ ВИДЕО</a>
|
||||
</div>
|
||||
<div onClick={handleOpen} className={styles.meets__otziv}>
|
||||
<span className={styles.meets__otziv_title}>Оставить вопрос</span>
|
||||
Оставьте вопрос первым
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className={styles.aboutMeet}>
|
||||
<div className={styles.aboutMeet__title}>О мероприятии</div>
|
||||
<div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div>
|
||||
</section>
|
||||
<section className={styles.expert}>
|
||||
<div className={styles.expert__title}>Специалист</div>
|
||||
<div className={styles.newContainer}>
|
||||
<div className={styles.expert__container}>
|
||||
<div className={styles.expert__img_container}><img className={styles.expert__img} src={avatar} alt="avatar"></img></div>
|
||||
|
||||
<div className={styles.expert__descr_container}>
|
||||
<div className={styles.expert__descr_fullname}>Иванов Иван Иванович</div>
|
||||
<div className={styles.expert__descr_speciality}>Психолог, таролог</div>
|
||||
<div className={styles.expert__descr_phone}>+7 (888) 888 - 88 - 88</div>
|
||||
<a href="#" className={styles.expert__descr_email}>exampl@ya.ru</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className={styles.container__links}>
|
||||
<div className={styles.links__title}>Ссылки на материалы специалиста</div>
|
||||
<div className={styles.links__img_container}>
|
||||
<a href="#"><img src={vk} className={styles.links__img}></img></a>
|
||||
<a href="#"><img src={tg} className={styles.links__img}></img></a>
|
||||
<a href="#"><img src={book} className={styles.links__img}></img></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section className={styles.comments}>
|
||||
<div className={styles.comments__title}>Комментарии</div>
|
||||
<div className={styles.newInputContainer}>
|
||||
<div className={styles.comments__number}>3 КОММЕНТАРИЯ</div>
|
||||
<div className={styles.comments__input_container}>
|
||||
<div className={styles.comments__input_img_container}>
|
||||
<img className={styles.comments__input_img} src={newAvatar} alt='avatar'></img>
|
||||
<textarea placeholder="Дмитрий Кирканов" className={styles.comments__input}></textarea>
|
||||
</div>
|
||||
<div className={styles.comments__button_container}>
|
||||
<button className={styles.comments__button}>ОТПРАВИТЬ</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.comments__all_container}>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section className={styles.someMeetings}>
|
||||
<div className={styles.someMeetings__title}>Еще мероприятия</div>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={6} md={4} lg={3} >
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4} lg={3} >
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4} lg={3} >
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4} lg={3} >
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Box>
|
||||
</section>
|
||||
<div>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<div className={styles.modal__title}>Вопросы</div>
|
||||
<div onClick={handleClose} className={styles.modal__close}><div className={styles.modal__close_img}>+</div></div>
|
||||
<div className={styles.modal__line}></div>
|
||||
<div className={styles.modal__question_number}>Всего <span>1</span></div>
|
||||
<div className={styles.modal__question_container}>
|
||||
<div className={styles.modal__question_containerSecond}>
|
||||
<div className={styles.modal__question_user}>
|
||||
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||
<div className={styles.modal__question_user_descr}>Задача организации, в особенности же начало повседневной работы по формированию позиции обеспечивает актуальность приоретизации разума над эмоциями. </div>
|
||||
<div className={styles.modal__question_time_container}>
|
||||
<div className={styles.modal__question_time}>4 мая 1990, 00:00</div>
|
||||
<div className={styles.modal__question_like_container}><img src={like} alt='like' className={styles.modal__question_like_container}></img> <span className={styles.modal__question_like}>0</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.modal__question_containerThird}>
|
||||
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||
<textarea placeholder="Дмитрий Кирканов" className={styles.modal__question_input}></textarea>
|
||||
<div className={styles.modal__question_button_container}>
|
||||
<button className={styles.modal__question_button + ' ' + styles.yellow}>Задать вопрос</button>
|
||||
<button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
export default MeetPage;
|
||||
595
src/Components/MeetAuthPage/style.module.scss
Normal file
595
src/Components/MeetAuthPage/style.module.scss
Normal file
@@ -0,0 +1,595 @@
|
||||
.meets {
|
||||
margin-top: 150px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&__img {
|
||||
width: 44%;
|
||||
height: 300px;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&__mainInfo {
|
||||
&_container {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: start;
|
||||
}
|
||||
&_descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 30px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
&_type {
|
||||
display: flex;
|
||||
margin-top: 25px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_text, #888);
|
||||
width: 110px;
|
||||
height: 35px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--gray_text, #888);
|
||||
font-family: Montserrat;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&_status {
|
||||
margin-top: 40px;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
&_time {
|
||||
margin-top: 40px;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
&_status_img {
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
&__otziv {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 300px;
|
||||
width: 44%;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
margin-top: 50px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
&_title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 4px;
|
||||
}
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.aboutMeet {
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__descr {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.90);
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 110%; /* 27.6px */
|
||||
}
|
||||
|
||||
}
|
||||
.expert {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__img {
|
||||
border-radius: 10000px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.expert {
|
||||
|
||||
|
||||
&__container {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
&__img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
&_container {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
&__descr {
|
||||
|
||||
|
||||
|
||||
&_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
&_fullname {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&_speciality {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 6px;
|
||||
}
|
||||
&_phone {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 16px;
|
||||
}
|
||||
&_email {
|
||||
color: #2C41FF;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.someMeetings {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
}
|
||||
.cards_container {
|
||||
display: flex;
|
||||
}
|
||||
.newMeeting {
|
||||
&__container {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
&__button {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
border-radius: 10px;
|
||||
background: var(--yellow, #FFED00);
|
||||
height: 80px;
|
||||
width: 450px;
|
||||
}
|
||||
&__link {
|
||||
margin-top: 30px;
|
||||
color: #2C41FF;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
&__ling_video {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 140px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.newContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.container__links {
|
||||
width: 40%;
|
||||
}
|
||||
.links {
|
||||
|
||||
&__title {
|
||||
margin-top: 128px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
}
|
||||
&__img {
|
||||
margin-right: 10px;
|
||||
|
||||
&_container {
|
||||
margin-top: 45px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expert {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__img {
|
||||
border-radius: 10000px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.yellowSpan {
|
||||
color: #FD0
|
||||
}
|
||||
.comments {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__number {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
background: #FFF;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
padding-left: 20px;
|
||||
text-align: start;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
padding-left: 30px;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
padding-top: 30px;
|
||||
&_img {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
&_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
&_img_container {
|
||||
display: flex;
|
||||
margin-top: 60px;
|
||||
}
|
||||
&_img {
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
.newInputContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
&__number {
|
||||
display: flex;
|
||||
margin-top: 60px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__button {
|
||||
border-radius: 5.833px;
|
||||
background: var(--yellow, #FD0);
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
margin-top: 35px;
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&__all_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 500px;
|
||||
margin-top: 50px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.oneComment {
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
margin-top: 70px;
|
||||
}
|
||||
&__img {
|
||||
margin-right: 50px;
|
||||
}
|
||||
&__descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 20px;
|
||||
&_title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-right: 12px;
|
||||
&_container {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
}
|
||||
&_time {
|
||||
color: var(--gray_text, #888);
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
width: 300px;
|
||||
&__container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 5000px;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
&__title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
stroke-width: 1px;
|
||||
background-color: #D0D2D8;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
height: 96px;
|
||||
height: 45px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 58.625px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
top: 0px;
|
||||
right: 50px;
|
||||
}
|
||||
&__question {
|
||||
&_number {
|
||||
margin-top: 50px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
span {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_container {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&_containerSecond {
|
||||
width: 48%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
&_user {
|
||||
&_img {
|
||||
margin-right: 25px;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items:center;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
&_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
&_like {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px 0 0 10px;
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
&_input {
|
||||
margin-top: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 100%;
|
||||
height: 235px;
|
||||
padding-top: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
&_containerThird {
|
||||
margin-right: 3%;
|
||||
}
|
||||
&_button {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yellow {
|
||||
border-radius: 10px;
|
||||
background-color: #FD0;
|
||||
width: 190px;
|
||||
height: 50px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.gray {
|
||||
border-radius: 10px;
|
||||
background: var(--gray_stroke, #D0D2D8);
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
}
|
||||
122
src/Components/MeetAuthPageAdmin/index.jsx
Normal file
122
src/Components/MeetAuthPageAdmin/index.jsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import Header from "../Header";
|
||||
import styles from './style.module.scss';
|
||||
import clock from '../../img/MeetPage/Clock.png';
|
||||
import globe from '../../img/MeetPage/Globe.png';
|
||||
import avatar from '../../img/MeetPage/avatar.png';
|
||||
import like from '../../img/MeetPage/Facebook.png';
|
||||
import Card from "../Card";
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
// import { useState, CSSProperties, useEffect, useRef } from "react";
|
||||
import newAvatar from '../../img/MeetPage/newAvatar.png';
|
||||
import vk from '../../img/MeetPage/Vk.png';
|
||||
import tg from '../../img/MeetPage/Telegram.png';
|
||||
import book from '../../img/MeetPage/Book.png';
|
||||
import * as React from 'react';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import newAvatarSecond from '../../img/AddUsers/newAvatar.png';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: "56%",
|
||||
height: "80vh",
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: '25px',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
const MeetPage = () => {
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Header></Header>
|
||||
|
||||
<section className={styles.meets}>
|
||||
<div className={styles.meets__mainInfo_container}>
|
||||
<input placeholder="Ввести название мероприятия" className={styles.meets__mainInfo_descr}></input>
|
||||
<input placeholder='Тип мероприятия' className={styles.meets__mainInfo_type}></input>
|
||||
<div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <input className={styles.time_input} placeholder="Время миропириятия" ></input> </div>
|
||||
<div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <input className={styles.status_input} placeholder='Дата проведения'></input> </div>
|
||||
</div>
|
||||
|
||||
<form className={styles.addModal_form} method="post" encType="multipart/form-data">
|
||||
<div className={styles.input_file_row}>
|
||||
<label className={styles.input_file}>
|
||||
<input type="file" name="file[]" multiple accept="image/*"/>
|
||||
<div className={styles.addUser__card_container_new}>
|
||||
<div className={styles.round}>+</div>
|
||||
<div className={styles.addUser__card_text}>Добавить пользователя</div>
|
||||
</div>
|
||||
</label>
|
||||
<div className={styles.input_file_list}></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</section>
|
||||
<div className={styles.container}>
|
||||
|
||||
<div className={styles.meets__otziv_container}>
|
||||
<div className={styles.newMeeting__container}>
|
||||
|
||||
<input placeholder="Ссылка на мероприятие" className={styles.newMeeting__link}></input>
|
||||
<input placeholder="Добавить ссылку на видео" className={styles.newMeeting__link_video}></input>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className={styles.aboutMeet}>
|
||||
<div className={styles.aboutMeet__title}>О мероприятии</div>
|
||||
<textarea placeholder="Написать описание мероприятия" style={{marginTop: '50px'}} className={styles.comments__input}></textarea>
|
||||
</section>
|
||||
<section className={styles.expert}>
|
||||
<div className={styles.expert__title}>Специалист</div>
|
||||
<div className={styles.addModal_user_container}>
|
||||
<div className={styles.addModal_user_img_container}>
|
||||
<form className={styles.addModal_form} method="post" encType="multipart/form-data">
|
||||
<div className={styles.input_file_row}>
|
||||
<label className={styles.input_file}>
|
||||
<input type="file" name="file[]" multiple accept="image/*"/>
|
||||
<span><img src={newAvatarSecond}></img></span>
|
||||
</label>
|
||||
<div className={styles.input_file_list}></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className={styles.addModal_user_input_container}>
|
||||
<input placeholder='ФИО специалиста' className={styles.addModal_user}></input>
|
||||
<input placeholder='Должность' className={styles.addModal_user}></input>
|
||||
<select className={styles.addModal_user_select}>
|
||||
<option>Пользователь</option>
|
||||
<option>Администратор</option>
|
||||
</select>
|
||||
<input placeholder='Почта' className={styles.addModal_user}></input>
|
||||
<input placeholder='Номер телефона' className={styles.addModal_user}></input>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className={styles.btn_contain}>
|
||||
<button className={styles.newMeeting__button}>Опубликовать мероприятие</button>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
export default MeetPage;
|
||||
1172
src/Components/MeetAuthPageAdmin/style.module.scss
Normal file
1172
src/Components/MeetAuthPageAdmin/style.module.scss
Normal file
File diff suppressed because it is too large
Load Diff
108
src/Components/MeetPage/index.jsx
Normal file
108
src/Components/MeetPage/index.jsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import Header from "../Header";
|
||||
import styles from './style.module.scss';
|
||||
import clock from '../../img/MeetPage/Clock.png';
|
||||
import globe from '../../img/MeetPage/Globe.png';
|
||||
import avatar from '../../img/MeetPage/avatar.png';
|
||||
import {useState} from 'react'
|
||||
import { style } from "@mui/system";
|
||||
// import Card from "../Card";
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
|
||||
// const httpApiMethods = new HttpApiMethods()
|
||||
// const meets = await httpApiMethods.GetMeetings()
|
||||
|
||||
const MeetPage = () => {
|
||||
|
||||
// const filterMeet = meets.filter( (item, index) => index <= 3 )
|
||||
// console.log(filterMeet)
|
||||
// const id = 0
|
||||
// console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
|
||||
// const meetPng = (id) => {
|
||||
// console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
|
||||
// return httpApiMethods.APIURL_FILES + meets[id].speackerImage
|
||||
|
||||
// }
|
||||
// console.log(meetPng(id))
|
||||
// function extractDateTime(dateString) {
|
||||
// const dateTime = new Date(dateString);
|
||||
// const date = dateTime.toLocaleDateString();
|
||||
// const time = dateTime.toLocaleTimeString();
|
||||
|
||||
// return { date, time };
|
||||
// }
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header></Header>
|
||||
|
||||
<section className={styles.meets}>
|
||||
<div className={styles.meets__mainInfo_container}>
|
||||
<span className={styles.meets__mainInfo_descr}>Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</span>
|
||||
<span className={styles.meets__mainInfo_type}>Психология</span>
|
||||
<div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
|
||||
<div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
|
||||
</div>
|
||||
{/* <div className={styles.meets__img}><img src={meetPng(id)}></img></div> */}
|
||||
|
||||
</section>
|
||||
<div className={styles.meets__otziv_container}>
|
||||
<div className={styles.meets__otziv}>
|
||||
<span className={styles.meets__otziv_title}>Отзывы</span>
|
||||
Оставьте первый отзыв
|
||||
</div>
|
||||
</div>
|
||||
<section className={styles.aboutMeet}>
|
||||
<div className={styles.aboutMeet__title}>О мероприятии</div>
|
||||
<div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div>
|
||||
</section>
|
||||
<section className={styles.expert}>
|
||||
<div className={styles.expert__title}>Специалист</div>
|
||||
<div className={styles.expert__container}>
|
||||
<div className={styles.expert__img_container}><img className={styles.expert__img} src={avatar} alt="avatar"></img></div>
|
||||
<div className={styles.expert__descr_container}>
|
||||
<div className={styles.expert__descr_fullname}>Иванов Иван Иванович</div>
|
||||
<div className={styles.expert__descr_speciality}>Психолог, таролог</div>
|
||||
<div className={styles.expert__descr_phone}>+7 (888) 888 - 88 - 88</div>
|
||||
<a href="#" className={styles.expert__descr_email}>exampl@ya.ru</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className={styles.someMeetings}>
|
||||
<div className={styles.someMeetings__title}>Еще мероприятия</div>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
{/* <Grid container spacing={1}>
|
||||
{Array.isArray(meets) ? (
|
||||
filterMeet.map((item, index) => (
|
||||
|
||||
|
||||
<Grid item sm={6} xl={3} md={6} lg={4} key={index}>
|
||||
<div className='event_card' >
|
||||
<div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||
<div className="taggs">
|
||||
<div className='tagged'>{item.tags}</div>
|
||||
<div className="feautures">{item.type}</div>
|
||||
</div>
|
||||
<h4 className="event-card__title">{item.title}</h4>
|
||||
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
|
||||
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
|
||||
</Grid> */}
|
||||
</Box>
|
||||
</section>
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
export default MeetPage;
|
||||
226
src/Components/MeetPage/style.module.scss
Normal file
226
src/Components/MeetPage/style.module.scss
Normal file
@@ -0,0 +1,226 @@
|
||||
.meets {
|
||||
margin-top: 150px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&__img {
|
||||
width: 44%;
|
||||
height: 300px;
|
||||
|
||||
|
||||
img {
|
||||
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
&__mainInfo {
|
||||
&_container {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: start;
|
||||
}
|
||||
&_descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 30px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
&_type {
|
||||
display: flex;
|
||||
margin-top: 25px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_text, #888);
|
||||
width: 110px;
|
||||
height: 35px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--gray_text, #888);
|
||||
font-family: Montserrat;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&_status {
|
||||
margin-top: 40px;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
&_time {
|
||||
margin-top: 40px;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
&_status_img {
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
&__otziv {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 300px;
|
||||
width: 44%;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
margin-top: 50px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
&_title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 4px;
|
||||
}
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.aboutMeet {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__descr {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.90);
|
||||
font-family: Inter;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 110%; /* 27.6px */
|
||||
}
|
||||
|
||||
}
|
||||
.expert {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__img {
|
||||
border-radius: 10000px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.expert {
|
||||
|
||||
|
||||
&__container {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
&__img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
&_container {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
&__descr {
|
||||
|
||||
|
||||
|
||||
&_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
&_fullname {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&_speciality {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 6px;
|
||||
}
|
||||
&_phone {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 16px;
|
||||
}
|
||||
&_email {
|
||||
color: #2C41FF;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.someMeetings {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
}
|
||||
.cards_container {
|
||||
display: flex;
|
||||
}
|
||||
55
src/Components/Menu/index.jsx
Normal file
55
src/Components/Menu/index.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import avatar from '../../img/headerImg/avatar.png'
|
||||
import { useNavigate } from "react-router-dom";;
|
||||
import styles from './style.module.scss';
|
||||
export default function BasicMenu() {
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
const handleHome = () => {
|
||||
navigate('/');
|
||||
setAnchorEl(null);
|
||||
}
|
||||
const handleProfile = () => {
|
||||
navigate('/profile');
|
||||
setAnchorEl(null);
|
||||
}
|
||||
const handleAtchive = () => {
|
||||
navigate('/achievements');
|
||||
setAnchorEl(null);
|
||||
}
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<img
|
||||
src={avatar}
|
||||
className={styles.header_img}
|
||||
aria-controls={open ? 'basic-menu' : undefined}
|
||||
aria-expanded={open ? 'true' : undefined}
|
||||
onClick={handleClick}
|
||||
>
|
||||
</img>
|
||||
<Menu
|
||||
id="basic-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleProfile}>Профиль</MenuItem>
|
||||
<MenuItem onClick={handleAtchive}>Достижения</MenuItem>
|
||||
<MenuItem onClick={handleHome}>Выйти</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
8
src/Components/Menu/style.module.scss
Normal file
8
src/Components/Menu/style.module.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.header {
|
||||
&_img {
|
||||
|
||||
width: 55px;
|
||||
margin-right: 40px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
54
src/Components/TableMeets/style.module.scss
Normal file
54
src/Components/TableMeets/style.module.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.meeting {
|
||||
&__cards {
|
||||
list-style-type: none;
|
||||
width: 80%;
|
||||
padding: 0;
|
||||
}
|
||||
&__container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
// &__arrow {
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
22
src/Components/UserHeader/index.jsx
Normal file
22
src/Components/UserHeader/index.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
|
||||
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;
|
||||
39
src/Components/UserHeader/style.module.scss
Normal file
39
src/Components/UserHeader/style.module.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
|
||||
|
||||
.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: fixed;
|
||||
top: 0px;
|
||||
background-color: #fff;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
}
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: #FFED00;
|
||||
width: 200px;
|
||||
height: 42px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
1
src/Components/css/style.module.css
Normal file
1
src/Components/css/style.module.css
Normal file
File diff suppressed because one or more lines are too long
1
src/Components/css/style.module.css.map
Normal file
1
src/Components/css/style.module.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../MeetAuthPage/style.module.scss"],"names":[],"mappings":"AAAA,OACI,gBAAA,CACA,UAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CACA,YACI,SAAA,CACA,YAAA,CACA,wBAAA,CAGA,2BACI,SAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,wBAAA,CAAA,mBAAA,CAEJ,uBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CAEJ,sBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,eAAA,CACA,kBAAA,CACA,uCAAA,CACA,WAAA,CACA,WAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,4BAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAEJ,wBACI,eAAA,CAEA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAEJ,sBACI,eAAA,CAEA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAEJ,4BACI,WAAA,CACA,UAAA,CACA,iBAAA,CAGR,cACI,iBAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,YAAA,CACA,SAAA,CACA,4CAAA,CACA,eAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,oBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,iBAAA,CACA,SAAA,CACA,OAAA,CAEJ,wBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CAKZ,WACI,gBAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,kBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAEJ,kBACI,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,eAAA,CACA,oBAAA,CACA,iBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,gBAAA,CAIR,QAEI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,gBAAA,CACA,eACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAEJ,aACI,qBAAA,CAQJ,mBACI,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAGJ,aACI,WAAA,CACA,YAAA,CACA,uBACI,iBAAA,CAQJ,yBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,eAAA,CAEA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CAEJ,wBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAEJ,0BACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,cAAA,CAEJ,qBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CAEJ,qBACI,aAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CAIZ,cAEI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,gBAAA,CACA,qBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAIR,iBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAGA,uBACI,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CAEJ,oBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,kBAAA,CACA,iCAAA,CACA,WAAA,CACA,WAAA,CAEJ,kBACI,eAAA,CACA,aAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CAEJ,wBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,gBAAA,CACA,eAAA,CAGR,cACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CAEJ,kBACI,SAAA,CAIA,cACI,gBAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CACA,gBAAA,CAEJ,YACI,iBAAA,CAEA,sBACI,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA","file":"style.module.css"}
|
||||
42
src/Components/modal/index.jsx
Normal file
42
src/Components/modal/index.jsx
Normal file
@@ -0,0 +1,42 @@
|
||||
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Modal from '@mui/material/Modal';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
export default function BasicModal(open, close) {
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={close}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Text in a modal
|
||||
</Typography>
|
||||
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
|
||||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
74
src/Components/profilePage/index.jsx
Normal file
74
src/Components/profilePage/index.jsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import Header from "../Header";
|
||||
import styles from "./style.module.scss"
|
||||
import Calendar from "../Calendar";
|
||||
import avatar from '../../img/profilePage/avatar.png';
|
||||
import gift from '../../img/profilePage/gift.png';
|
||||
// import Home from '../Home/Home';
|
||||
const ProfilePage = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header></Header>
|
||||
<section className={styles.profile__container}>
|
||||
<div className={styles.profile__user_container}>
|
||||
<div className={styles.profile__user_img_container}>
|
||||
<img src={avatar} className={styles.profile__user_img}></img>
|
||||
<div className={styles.profile__user_role}>Участник</div>
|
||||
</div>
|
||||
<div className={styles.profile__user_info_container}>
|
||||
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||
<div className={styles.profile__user_progress_container}>
|
||||
<span>0</span>
|
||||
<span className={styles.profile__user_progress_line}></span>
|
||||
<span>1</span>
|
||||
<img src={gift} className={styles.profile__user_progress_img}></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.calendar__container}>
|
||||
<Calendar></Calendar>
|
||||
</div>
|
||||
</section>
|
||||
<section className={styles.myMeets}>
|
||||
<div className={styles.myMeets__title}>Ваши мероприятия</div>
|
||||
<div className={styles.meeting__container}>
|
||||
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.select__container}>
|
||||
<select className={styles.select} name="time__meeting">
|
||||
<option value="">Время мироприятия</option>
|
||||
</select>
|
||||
<select className={styles.select} name="type__meeting">
|
||||
<option value="">Тип мероприятия</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.NewContainer}>
|
||||
<div className={styles.search_container}>
|
||||
<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>
|
||||
{/* <Home></Home> */}
|
||||
{/* <FetchUtils></FetchUtils> */}
|
||||
{/* <PostForm /> */}
|
||||
{/* <EditForm /> */}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
||||
|
||||
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
export default ProfilePage;
|
||||
154
src/Components/profilePage/style.module.scss
Normal file
154
src/Components/profilePage/style.module.scss
Normal file
@@ -0,0 +1,154 @@
|
||||
|
||||
|
||||
|
||||
.profile {
|
||||
|
||||
&__container {
|
||||
margin-top: 200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&__user {
|
||||
&_img {
|
||||
&_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
&_container {
|
||||
display: flex;
|
||||
}
|
||||
&_info_container {
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
}
|
||||
&_fullName {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
span {
|
||||
color: #FD0;
|
||||
}
|
||||
|
||||
}
|
||||
&_spaciality {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_socialMedia {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_email {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&_role {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
margin-top: 20px;
|
||||
}
|
||||
&_progress {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
&_line {
|
||||
height: 2px;
|
||||
width: 140%;
|
||||
background: linear-gradient(90deg, #ffdd00,#d0d2d8);
|
||||
padding: 0 30px 0 30px;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.meeting {
|
||||
&__container {
|
||||
height: 1400px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
&__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: 30px;
|
||||
}
|
||||
.search_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.search__descr {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.myMeets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: start;
|
||||
text-align: left;
|
||||
justify-content: start;
|
||||
&__title {
|
||||
margin-top: 150px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 52px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
71
src/components/Home/Home.jsx
Normal file
71
src/components/Home/Home.jsx
Normal file
@@ -0,0 +1,71 @@
|
||||
// import React from 'react';
|
||||
// import './style.css'
|
||||
// import styled from 'styled-components';
|
||||
// // import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
// import {useState} from 'react'
|
||||
// import EditForm from '../post/Meets';
|
||||
// import Grid from '@mui/material/Grid';
|
||||
// import Card from '../Card';
|
||||
// import Box from '@mui/material/Box';
|
||||
|
||||
// function extractDateTime(dateString) {
|
||||
// const dateTime = new Date(dateString);
|
||||
// const date = dateTime.toLocaleDateString();
|
||||
// const time = dateTime.toLocaleTimeString();
|
||||
|
||||
// return { date, time };
|
||||
// }
|
||||
|
||||
// const httpApiMethods = new HttpApiMethods()
|
||||
|
||||
// const meets = await httpApiMethods.GetMeetings()
|
||||
|
||||
|
||||
// const Home = () => {
|
||||
// const [count, setCount] = useState(7)
|
||||
|
||||
// const filterMeet = meets.filter( (item, index) => index <= count )
|
||||
// const allMeets = () => {
|
||||
// setCount(meets.length)
|
||||
// }
|
||||
// return (
|
||||
// <>
|
||||
// <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end', alignItems:'center'}}>
|
||||
// <Grid container sx={{width: '96%'}}>
|
||||
|
||||
|
||||
// {Array.isArray(meets) ? (
|
||||
// filterMeet.map((item, index) => (
|
||||
|
||||
|
||||
// <Grid item sm={6} xl={3} md={6} lg={4} key={index}>
|
||||
// <div className='event_card' >
|
||||
// <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||
// <div className="taggs">
|
||||
// <div className='tagged'>{item.tags}</div>
|
||||
// <div className="feautures">{item.type}</div>
|
||||
// </div>
|
||||
// <h4 className="event-card__title">{item.title}</h4>
|
||||
// <p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||
// </div>
|
||||
// </Grid>
|
||||
|
||||
|
||||
|
||||
// ))
|
||||
// ) : (
|
||||
// <p>Неверный тип данных с сервера!</p>
|
||||
// )}
|
||||
// {/* <EditForm></EditForm> */}
|
||||
// </Grid>
|
||||
// </Box>
|
||||
// <div className='allButton__container'>
|
||||
// <button onClick={allMeets} className='allButton'>Все мероприятия</button>
|
||||
// </div>
|
||||
// </>
|
||||
|
||||
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default Home;
|
||||
110
src/components/Home/style.css
Normal file
110
src/components/Home/style.css
Normal file
@@ -0,0 +1,110 @@
|
||||
.event_card {
|
||||
width: 292px;
|
||||
height: 586px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 100px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
|
||||
.wrapp {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 40px;
|
||||
/* max-width: 1521px; */
|
||||
}
|
||||
|
||||
:root {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.event-card_date {
|
||||
color: var(--gray_text, #888);
|
||||
text-align: left;
|
||||
|
||||
/* title */
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.event-card__photo {
|
||||
width: 292px;
|
||||
height: 340px;
|
||||
flex-shrink: 0;
|
||||
background: #D9D9D9;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.event-card_title {
|
||||
color: #000;
|
||||
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 292px;
|
||||
height: 340px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.feautures {
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: Montserrat;
|
||||
align-items: center;
|
||||
font-size: 8px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
border-radius: 10px;
|
||||
background: #E7FFD2;
|
||||
height: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.allButton {
|
||||
color: var(--Black_Text, #151515);
|
||||
text-align: center;
|
||||
|
||||
/* Buttom max */
|
||||
font-family: Gilroy;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 125%; /* 35px */
|
||||
letter-spacing: -0.84px;
|
||||
border-radius: 1000px;
|
||||
border: 1px solid var(--Gray_Line, #D0D2D8);
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.allButton__container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
11
src/components/delete/Reactions.jsx
Normal file
11
src/components/delete/Reactions.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const DeleteReactions = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeleteReactions;
|
||||
109
src/components/edit/EditMeetsForm.jsx
Normal file
109
src/components/edit/EditMeetsForm.jsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
const EditMeetsForm = () => {
|
||||
const formRef = useRef(null);
|
||||
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||
const httpApiMethods = new HttpApiMethods();
|
||||
|
||||
const post = async (event) => {
|
||||
event.preventDefault(); // Предотвращение действия по умолчанию
|
||||
let formData = new FormData(formRef.current);
|
||||
setDataIsLoad(false);
|
||||
const updatedMeets = await httpApiMethods.EditMeetings(formData);
|
||||
};
|
||||
|
||||
const handleData = (data) => {
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
setData(data);
|
||||
} else {
|
||||
setData([]);
|
||||
console.error('Неверный тип данных с сервера!');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const data = await httpApiMethods.GetMeetings();
|
||||
handleData(data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
const [selectedId, setSelectedId] = useState('');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
|
||||
const handleDataClick = (id) => {
|
||||
const selected = data.find((item) => item.id === id);
|
||||
setSelectedData(selected);
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setSelectedId(event.target.value);
|
||||
const selected = data.find((item) => item.id === event.target.value);
|
||||
setSelectedData(selected);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const FillInputs = () => {
|
||||
httpApiMethods.GetByID()
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Edit</h2>
|
||||
<div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
|
||||
|
||||
<ul>
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
data.map((item, index) => (
|
||||
<button style={{ border: '1px solid black' }} onClick={() => handleDataClick(item.id)} key={index}>
|
||||
{/* {item.id} */}
|
||||
<div>{item.title}</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
</ul>
|
||||
{/* автозаполнение инпутов */}
|
||||
{selectedData && (
|
||||
<>
|
||||
<form ref={formRef}>
|
||||
<select name="id" value={selectedData.id} onChange={handleChange}>
|
||||
{data.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{/* <input type="text" placeholder='id' name='id' value={selectedData.id} onChange={handleChange} /> */}
|
||||
<input type="text" placeholder='name' name='title' value={selectedData.title} onChange={handleChange} />
|
||||
<input type="text" placeholder='time' name='time' value={selectedData.time} onChange={handleChange} />
|
||||
<input type="text" placeholder='theme' name='theme' value={selectedData.theme} onChange={handleChange} />
|
||||
<input type="text" placeholder='speakerName' name='speakerName' value={selectedData.speakerName} onChange={handleChange} />
|
||||
<input type="file" placeholder='speackerImage' name='speackerImage' onChange={handleChange} />
|
||||
<input type="file" placeholder='placeImages' name='placeImages' onChange={handleChange} />
|
||||
<input type="text" placeholder='splecializations' name='splecializations' value={selectedData.splecializations} onChange={handleChange} />
|
||||
<input type="text" placeholder='speakerEmail' name='speakerEmail' value={selectedData.speakerEmail} onChange={handleChange} />
|
||||
<input type="text" placeholder='tags' name='tags' value={selectedData.tags} onChange={handleChange} />
|
||||
<input type="text" placeholder='SpeakerTelephone' name='speakerTelephone' value={selectedData.speakerTelephone} onChange={handleChange} />
|
||||
<input type="text" placeholder='type' name='type' value={selectedData.type} onChange={handleChange} />
|
||||
<input type="text" placeholder='urls' name='urls' value={selectedData.urls} onChange={handleChange} />
|
||||
<input type="text" placeholder='placeAdress' name='placeAdress' value={selectedData.placeAdress} onChange={handleChange} />
|
||||
<input type="text" placeholder='duration' name='duration' value={selectedData.duration} onChange={handleChange} />
|
||||
<button onClick={post}>Edit</button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditMeetsForm;
|
||||
11
src/components/edit/EditQuestions.jsx
Normal file
11
src/components/edit/EditQuestions.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const EditQuestions = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditQuestions;
|
||||
11
src/components/edit/EditReviews.jsx
Normal file
11
src/components/edit/EditReviews.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const EditReviews = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditReviews;
|
||||
11
src/components/edit/EditUsers.jsx
Normal file
11
src/components/edit/EditUsers.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const EditUsers = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditUsers;
|
||||
@@ -1,68 +0,0 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import axios from "axios"
|
||||
import { useState } from "react"
|
||||
import './style.css'
|
||||
|
||||
|
||||
|
||||
const FetchUtils = () => {
|
||||
// default value of data is object or array/nums/string
|
||||
// const [rata, setRata] = useState([])
|
||||
const [user, setUser] = useState([])
|
||||
// single axios feetching
|
||||
|
||||
// useEffect(
|
||||
// () => {
|
||||
// async function getData() {
|
||||
// const response = await axios.get('http://localhost:5000/weatherforecast')
|
||||
// console.log(response.data)
|
||||
// setRata(response.data)
|
||||
// }
|
||||
// getData()
|
||||
// }, []
|
||||
// )
|
||||
// useEffect(
|
||||
// () => {
|
||||
async function getData() {
|
||||
const response = await axios.get('https://jsonplaceholder.typicode.com/users')
|
||||
console.log(response.data)
|
||||
setUser(response.data)
|
||||
}
|
||||
// getData()
|
||||
// }, []
|
||||
// )
|
||||
// Loop of axios fetching \\
|
||||
|
||||
// async function getData() {
|
||||
// const response = await axios.get('http://localhost:5000/weatherforecast')
|
||||
// console.log(response.data)
|
||||
// setRata(response.data)
|
||||
// }
|
||||
// getData()
|
||||
const removeList = () => {
|
||||
setUser([])
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<button onClick={getData}>Click to Get Data</button>
|
||||
<button onClick={removeList}>Click to Remove Data Listing</button>
|
||||
{/* Mapping of data */}
|
||||
<div>
|
||||
{Array.isArray(user) ? (
|
||||
<ul>
|
||||
{user.map((item) => (
|
||||
<ol key={item.id}>
|
||||
<li>{item.name}</li>
|
||||
<li>{item.username}</li>
|
||||
<li>{item.email}</li>
|
||||
</ol>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>Bad data type from server!</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default FetchUtils;
|
||||
85
src/components/get/Meets.jsx
Normal file
85
src/components/get/Meets.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
|
||||
import styled from 'styled-components';
|
||||
// import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
import {useState} from 'react'
|
||||
import EditMeetsForm from '../edit/EditMeetsForm';
|
||||
import Grid from '@mui/material/Grid';
|
||||
// import Card from '../Card';
|
||||
import Box from '@mui/material/Box';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function extractDateTime(dateString) {
|
||||
const dateTime = new Date(dateString);
|
||||
const date = dateTime.toLocaleDateString();
|
||||
const time = dateTime.toLocaleTimeString();
|
||||
|
||||
return { date, time };
|
||||
}
|
||||
|
||||
const httpApiMethods = new HttpApiMethods()
|
||||
|
||||
const meets = await httpApiMethods.GetMeetings()
|
||||
|
||||
|
||||
|
||||
export const MeetsGetByID = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const GetMeets = () => {
|
||||
const [count, setCount] = useState(7)
|
||||
|
||||
const filterMeet = meets.filter( (item, index) => index <= count )
|
||||
const allMeets = () => {
|
||||
setCount(meets.length)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end', alignItems:'center'}}>
|
||||
<Grid container sx={{width: '96%'}}>
|
||||
|
||||
|
||||
{Array.isArray(meets) ? (
|
||||
filterMeet.map((item, index) => (
|
||||
|
||||
|
||||
<Grid item sm={6} xl={3} md={6} lg={4} key={index}>
|
||||
<div className='event_card' >
|
||||
<div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||
<div className="taggs">
|
||||
<div className='tagged'>{item.tags}</div>
|
||||
<div className="feautures">{item.type}</div>
|
||||
</div>
|
||||
<h4 className="event-card__title">{item.title}</h4>
|
||||
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
|
||||
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
{/* <EditForm></EditForm> */}
|
||||
</Grid>
|
||||
</Box>
|
||||
<div className='allButton__container'>
|
||||
<button onClick={allMeets} className='allButton'>Все мероприятия</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default GetMeets;
|
||||
53
src/components/get/Questions.jsx
Normal file
53
src/components/get/Questions.jsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
const httpApiMethods = new HttpApiMethods
|
||||
|
||||
|
||||
|
||||
|
||||
export const GetQuestions = async () => {
|
||||
const questions = await httpApiMethods.GetQuestions()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{Array.isArray(questions) ? (
|
||||
questions.map((item, index) => (
|
||||
<div key={index}>
|
||||
<div>{item.id}</div>
|
||||
<div>{item.text}</div>
|
||||
<div>{item.meetingId}</div>
|
||||
<div>{item.userId}</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const GetQuestionsByID = async (id) => {
|
||||
const question = await httpApiMethods.GetByIDQuestions(id)
|
||||
|
||||
return (
|
||||
<div>
|
||||
{Array.isArray(question) ? (
|
||||
question.map((item, index) => (
|
||||
<div key={index}>
|
||||
<div>{item.id}</div>
|
||||
<div>{item.text}</div>
|
||||
<div>{item.meetingId}</div>
|
||||
<div>{item.userId}</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p>Неверный тип данных с сервера!</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GetQuestionsByID;
|
||||
19
src/components/get/Reactions.jsx
Normal file
19
src/components/get/Reactions.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
export const GetByIDReactions = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getReactions = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Reactions;
|
||||
19
src/components/get/Reviews.jsx
Normal file
19
src/components/get/Reviews.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
export const GetReviews = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const GetReviewsByID = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GetReviewsByID;
|
||||
36
src/components/get/User.jsx
Normal file
36
src/components/get/User.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
const User = () => {
|
||||
let id = '9c69d5e7-74ec-4f92-af3a-fef7d30c55bb'
|
||||
// Cookies.set('userId')
|
||||
const user = new HttpApiMethods().GetUsers(id)
|
||||
|
||||
if (!Array.isArray(user)) {
|
||||
return <p>Неверный тип данных с сервера!</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{user.map((item, index) => (
|
||||
|
||||
<div key={index}>
|
||||
<p>{item.id}</p>
|
||||
<img src={item.avatarUrl} alt={item.avatarUrl}/>
|
||||
<p>{item.fio}</p>
|
||||
<p>{item.specialities}</p>
|
||||
<a>{item.telegramBotUrl}</a>
|
||||
<p>{item.level}</p>
|
||||
<p>{item.userName}</p>
|
||||
<p>{item.normalizedUserName}</p>
|
||||
<p>{item.email}</p>
|
||||
<p>{item.phoneNumber}</p>
|
||||
<p>{item.id}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default User;
|
||||
48
src/components/post/Meets.jsx
Normal file
48
src/components/post/Meets.jsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
|
||||
|
||||
const PostForm = () => {
|
||||
const formRef = useRef(null); // Добавление этой строки
|
||||
const [dataIsLoad, setDataIsLoad] = useState(false)
|
||||
|
||||
let post = async () => {
|
||||
const httpApiMethods = new HttpApiMethods();
|
||||
let formData = new FormData(formRef.current); // Изменение этой строки
|
||||
setDataIsLoad(false)
|
||||
const updatedMeets = httpApiMethods.AddMeetings(formData)
|
||||
.then(
|
||||
() => {
|
||||
setDataIsLoad(true)
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Post</h2>
|
||||
<div>{dataIsLoad ? "ДАнные успешно загрузилисб" : ""}</div>
|
||||
<form ref={formRef} action=''>
|
||||
<input type="text" placeholder='title' name='title'/>
|
||||
<input type="text" placeholder='time' name='time'/>
|
||||
<input type="text" placeholder='theme' name='theme'/>
|
||||
<input type="text" placeholder='speakerName' name='speakerName'/>
|
||||
<input type="file" placeholder='speackerImage' name='speackerImage'/>
|
||||
<input type="file" placeholder='placeImages' name='placeImages'/>
|
||||
<input type="text" placeholder='splecializations' name='splecializations'/>
|
||||
<input type="text" placeholder='speakerEmail' name='speakerEmail'/>
|
||||
<input type="text" placeholder='type' name='type'/>
|
||||
<input type="text" placeholder='SpeakerTelephone' name='speakerTelephone'/>
|
||||
<input type="text" placeholder='tags' name='tags'/>
|
||||
<input type="text" placeholder='urls' name='urls'/>
|
||||
<input type="text" placeholder='placeAdress' name='placeAdress'/>
|
||||
<input type="text" placeholder='duration' name='duration'/>
|
||||
<button onClick={post}>Create</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PostForm;
|
||||
13
src/components/post/PostReviews.jsx
Normal file
13
src/components/post/PostReviews.jsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
const PostReviews = () => {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PostReviews;
|
||||
51
src/components/post/Questions.jsx
Normal file
51
src/components/post/Questions.jsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
const Questions = () => {
|
||||
const formRef = useRef(null);
|
||||
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||
const [curentUser, setCurentUser] = useState(null);
|
||||
|
||||
let post = async (event) => {
|
||||
event.preventDefault();
|
||||
const httpApiMethods = new HttpApiMethods();
|
||||
const user_id = Cookies.get('userData')
|
||||
let formData = new FormData(formRef.current);
|
||||
|
||||
|
||||
|
||||
if (!formData.get('fio') || !formData.get('avatar') || !formData.get('userId') || !formData.get('text') || !formData.get('meetingId')) {
|
||||
console.error('Ошибка: Не все поля формы заполнены');
|
||||
return;
|
||||
}
|
||||
|
||||
setDataIsLoad(false);
|
||||
httpApiMethods.PostQuestions(formData).then(response => {
|
||||
console.log(response)
|
||||
setDataIsLoad(true);
|
||||
meets_id = '9c69d5e7-74ec-4f92-af3a-fef7d30c55bb'
|
||||
// let user_id = response.data.id;
|
||||
// console.log(response)
|
||||
// console.log(user_id)
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Создание Questions, получение ID в Cookies</h2>
|
||||
<div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
|
||||
<form ref={formRef} action=''>
|
||||
|
||||
{/* <input type="text" placeholder='userId' name={Cookies.get('userData')} /> */}
|
||||
<input type="text" placeholder='userId' name='userId' value={Cookies.get('userId')} />
|
||||
<input type="text" placeholder='text' name='text' />
|
||||
<input type="text" placeholder='meetingId' name='meetingId' value={'9c69d5e7-74ec-4f92-af3a-fef7d30c55bb'} />
|
||||
<button onClick={post}>Create</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Questions;
|
||||
13
src/components/post/UserAuth.jsx
Normal file
13
src/components/post/UserAuth.jsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
const UserAuth = () => {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserAuth;
|
||||
58
src/components/post/Users.jsx
Normal file
58
src/components/post/Users.jsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
export const PostUserModerator = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const Users = () => {
|
||||
const formRef = useRef(null);
|
||||
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||
const [curentUser, setCurentUser] = useState(null);
|
||||
|
||||
let post = async (event) => {
|
||||
event.preventDefault();
|
||||
const httpApiMethods = new HttpApiMethods();
|
||||
let formData = new FormData(formRef.current);
|
||||
|
||||
if (!formData.get('fio') || !formData.get('avatar') || !formData.get('username') || !formData.get('specialities') || !formData.get('telegramBotUrl')) {
|
||||
console.error('Ошибка: Не все поля формы заполнены');
|
||||
return;
|
||||
}
|
||||
|
||||
setDataIsLoad(false);
|
||||
httpApiMethods.PostUsers(formData).then(response => {
|
||||
console.log(response)
|
||||
setDataIsLoad(true);
|
||||
// let user_id = response.data.id;
|
||||
// console.log(response)
|
||||
// console.log(user_id)
|
||||
Cookies.set('userId', response.id);
|
||||
Cookies.set('token', response.token)
|
||||
// return user_id
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Создание пользователя, получение ID в Cookies</h2>
|
||||
<div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
|
||||
<form ref={formRef} action=''>
|
||||
<input type="text" placeholder='fio' name='fio' />
|
||||
<input type="file" placeholder='avatar' name='avatar' />
|
||||
<input type="text" placeholder='username' name='username' />
|
||||
<input type="text" placeholder='specialities' name='specialities' />
|
||||
<input type="text" placeholder='telegramBotUrl' name='telegramBotUrl' />
|
||||
<button onClick={post}>Create</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Users;
|
||||
0
src/components/post/postReactions.jsx
Normal file
0
src/components/post/postReactions.jsx
Normal file
256
src/components/utils/FetchUtils.jsx
Normal file
256
src/components/utils/FetchUtils.jsx
Normal file
@@ -0,0 +1,256 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import axios from "axios"
|
||||
import { useState } from "react"
|
||||
import './style.css'
|
||||
import { Cookie } from "@mui/icons-material"
|
||||
|
||||
|
||||
|
||||
export class HttpApiMethods {
|
||||
|
||||
token;
|
||||
HttpApiMethods()
|
||||
{
|
||||
token = Cookie,get('token')
|
||||
}
|
||||
// URL`s
|
||||
user_id = '17e5fc7a-8f22-4c0b-8b33-5dc3a6937561'
|
||||
APIURL = "https://cyberbloom.zetcraft.ru/api"
|
||||
APIURL_FILES = "https://cyberbloom.zetcraft.ru/api/cyber-boom-files/"
|
||||
// получение мероприятий по ID
|
||||
GetByID = async (id) => {
|
||||
|
||||
let innerUrl = this.APIURL + `/meetings?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Получение всех мероприятий
|
||||
//
|
||||
GetMeetings = async () => {
|
||||
let innerUrl = this.APIURL + `/meetings/list?offset=0&limit=20`;
|
||||
|
||||
const response = await axios.get(innerUrl);
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Создание мероприятия
|
||||
AddMeetings = async (data) => {
|
||||
let innerUrl = this.APIURL + `/meetings`;
|
||||
|
||||
let response = await axios.postForm(innerUrl, data); //
|
||||
return response.data;
|
||||
|
||||
}
|
||||
// Редактирование уже существующего мероприятия
|
||||
EditMeetings = async (data) => {
|
||||
let innerUrl = this.APIURL + `/meetings`;
|
||||
let response = await axios.putForm(innerUrl, data); //
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Удалить мероприятие, пока что не реализовано
|
||||
DeleteMeetings = async (id) => {
|
||||
let innerUrl = this.APIURL + `/meetings?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl) //
|
||||
|
||||
return response.data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Users
|
||||
//
|
||||
PostUsers = async (data) => {
|
||||
let innerUrl = this.APIURL + `/users`
|
||||
const responce = await axios.postForm(innerUrl, data)
|
||||
return responce.data
|
||||
}
|
||||
PostUsersModerator = async (data) => {
|
||||
let innerUrl = this.APIURL + `/users/moderator`
|
||||
const responce = await axios.postForm(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} })
|
||||
return responce.data.id
|
||||
}
|
||||
EditUsers = async (data) => {
|
||||
let innerUrl = this.APIURL + `/users`
|
||||
const responce = await axios.putForm(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }) //
|
||||
return responce.data.id
|
||||
}
|
||||
GetUsers = async (id) => {
|
||||
let innerUrl = this.APIURL + `/users?id=${id}`
|
||||
|
||||
const responce = await axios.get(innerUrl) //
|
||||
|
||||
return responce.data
|
||||
}
|
||||
GetUsersStats = async (id) => {
|
||||
let innerUrl = this.APIURL + `/users/stats?id=${id}`
|
||||
|
||||
const responce = await axios.get(innerUrl) //
|
||||
|
||||
return responce.data
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Questions
|
||||
//
|
||||
GetByIDQuestions = async (id) => {
|
||||
|
||||
let innerUrl = this.APIURL + `/questions?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Получение всех мероприятий
|
||||
GetQuestions = async () => {
|
||||
let innerUrl = this.APIURL + `/questions/list?offset=0&limit=20`;
|
||||
|
||||
const response = await axios.get(innerUrl);
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Создание мероприятия
|
||||
PostQuestions = async (data) => {
|
||||
let innerUrl = this.APIURL + `/questions`;
|
||||
|
||||
let response = await axios.post(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
|
||||
}
|
||||
// Редактирование уже существующего мероприятия
|
||||
EditQuestions = async (data) => {
|
||||
let innerUrl = this.APIURL + `/questions`;
|
||||
let response = await axios.put(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reactions
|
||||
//
|
||||
GetByIDReactions = async (id) => {
|
||||
|
||||
let innerUrl = this.APIURL + `/reactions?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Получение всех мероприятий
|
||||
GetReactions = async () => {
|
||||
let innerUrl = this.APIURL + `/reactions/list?offset=0&limit=20`;
|
||||
|
||||
const response = await axios.get(innerUrl);
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Создание мероприятия
|
||||
PostReactions = async (data) => {
|
||||
let innerUrl = this.APIURL + `/reactions`;
|
||||
|
||||
let response = await axios.post(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
|
||||
}
|
||||
// Редактирование уже существующего мероприятия
|
||||
DeleteReactions = async (id) => {
|
||||
let innerUrl = this.APIURL + `/reactions?id=${id}`;
|
||||
let response = await axios.delete(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
}
|
||||
|
||||
//
|
||||
// Reviews
|
||||
//
|
||||
GetByIDReviews = async (id) => {
|
||||
|
||||
let innerUrl = this.APIURL + `/reviews?id=${id}`
|
||||
|
||||
const response = await axios.get(innerUrl)
|
||||
|
||||
return response.data;
|
||||
}
|
||||
GetReviews = async () => {
|
||||
let innerUrl = this.APIURL + `/reviews/list?offset=0&limit=20`;
|
||||
|
||||
const response = await axios.get(innerUrl);
|
||||
|
||||
return response.data;
|
||||
}
|
||||
// Создание мероприятия
|
||||
PostReviews = async (data) => {
|
||||
let innerUrl = this.APIURL + `/reviews`;
|
||||
|
||||
let response = await axios.post(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
|
||||
}
|
||||
// Редактирование уже существующего мероприятия
|
||||
EditReviews = async (data) => {
|
||||
let innerUrl = this.APIURL + `/reviews`;
|
||||
let response = await axios.put(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||
return response.data;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const FetchUtils = async () => {
|
||||
const httpApiMethods = new HttpApiMethods() // Создание экземпляра класса HttpApiMethods
|
||||
|
||||
const meets = await httpApiMethods.GetMeetings()
|
||||
const [user, setUser] = useState([])
|
||||
|
||||
// async function getData() {
|
||||
// const response = await axios.get()
|
||||
// console.log(response.data)
|
||||
// setUser(response.data)
|
||||
// }
|
||||
|
||||
const removeList = () => {
|
||||
setUser([])
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={getData}>Click to Get Data</button>
|
||||
<button onClick={removeList}>Click to Remove Data Listing</button>
|
||||
{/* Mapping of data */}
|
||||
<div>
|
||||
{Array.isArray(meets) ? (
|
||||
<ul>
|
||||
{meets.map((item) => (
|
||||
<ol key={item.id}>
|
||||
<li>{item.title}</li>
|
||||
<li>{item.time}</li>
|
||||
<li>{item.speakerName}</li>
|
||||
<li>{item.speackerImage}</li>
|
||||
<li>{item.splecializations}</li>
|
||||
<li>{item.type}</li>
|
||||
<li>{item.speakerTelephone}</li>
|
||||
<li>{item.speakerEmail}</li>
|
||||
<li>{item.tags}</li>
|
||||
<li>{item.videoUrl}</li>
|
||||
</ol>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>Bad data type from server!</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default FetchUtils;
|
||||
BIN
src/img/AddUsers/delete.png
Normal file
BIN
src/img/AddUsers/delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 688 B |
BIN
src/img/AddUsers/newAvatar.png
Normal file
BIN
src/img/AddUsers/newAvatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
src/img/AddUsers/permission.png
Normal file
BIN
src/img/AddUsers/permission.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 740 B |
BIN
src/img/MeetPage/Book.png
Normal file
BIN
src/img/MeetPage/Book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/img/MeetPage/Clock.png
Normal file
BIN
src/img/MeetPage/Clock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 581 B |
BIN
src/img/MeetPage/Facebook.png
Normal file
BIN
src/img/MeetPage/Facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 710 B |
BIN
src/img/MeetPage/Globe.png
Normal file
BIN
src/img/MeetPage/Globe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 819 B |
BIN
src/img/MeetPage/Telegram.png
Normal file
BIN
src/img/MeetPage/Telegram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/img/MeetPage/VK.png
Normal file
BIN
src/img/MeetPage/VK.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/img/MeetPage/avatar.png
Normal file
BIN
src/img/MeetPage/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/img/MeetPage/newAvatar.png
Normal file
BIN
src/img/MeetPage/newAvatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/img/headerImg/Icon.png
Normal file
BIN
src/img/headerImg/Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1016 B |
BIN
src/img/headerImg/OgettoLogo.png
Normal file
BIN
src/img/headerImg/OgettoLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/img/headerImg/avatar.png
Normal file
BIN
src/img/headerImg/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/img/headerImg/google.png
Normal file
BIN
src/img/headerImg/google.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 953 B |
BIN
src/img/headerImg/header.png
Normal file
BIN
src/img/headerImg/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/img/homePage/muza.png
Normal file
BIN
src/img/homePage/muza.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 KiB |
BIN
src/img/profilePage/avatar.png
Normal file
BIN
src/img/profilePage/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
src/img/profilePage/gift.png
Normal file
BIN
src/img/profilePage/gift.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
|
||||
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
|
||||
Reference in New Issue
Block a user