CyberBloom/OgeetoCaseCyberGarden
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rrr

Browse Source 
tables
This commit is contained in:
Demi-Play
2023-12-22 18:37:26 +03:00
parent 759adc8506
commit ac7c5be419
17 changed files with 181 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/App.jsx
View File

@ -1,22 +1,43 @@
import { BrowserRouter, Routes, Route } from "react-router-dom";
import BeingPage from "./Components/BeingPage/index.jsx";
import HomePage from "./Components/HomePage/index.jsx";
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,
},
// Добавьте другие мероприятия сюда
];
function App() {
const [count, setCount] = useState(0)
return (
<>
<BrowserRouter>
<Routes>
<Route path="/being" element={<BeingPage />}/>
<Route path="/" element={<HomePage />}/>
</Routes>
</BrowserRouter>
{/* <FetchUtils /> */}
<TableMeets events={ events } />
</>
)
}

10
src/Components/BeingPage/index.jsx
View File

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

0
src/Components/BeingPage/style.module.scss
View File

22
src/Components/Header/index.jsx
View File

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

37
src/Components/Header/style.module.scss
View File

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

16
src/Components/HomePage/index.jsx
View File

@ -1,16 +0,0 @@
import Header from "../Header";
import styles from "./style.module.scss";
const HomePage = () => {
return (
<>
<Header></Header>
<section></section>
</>
)
}
export default HomePage;

6
src/Components/HomePage/style.module.scss
View File

@ -1,6 +0,0 @@
.title {
font-size: 100px;
}

1
src/Components/css/module.style.css
View File

@ -1 +0,0 @@
.title{font-size:100px}/*# sourceMappingURL=module.style.css.map */

1
src/Components/css/module.style.css.map
View File

@ -1 +0,0 @@
{"version":3,"sources":["../HomePage/module.style.scss"],"names":[],"mappings":"AAEA,OACI,eAAA","file":"module.style.css"}

1
src/Components/css/style.module.css
View File

@ -1 +0,0 @@
.header{height:75px;width:80%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.header__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:150px;position:absolute;top:0px;left:0px}.header__logo{cursor:pointer}.header__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:100px;background:#ffed00;width:200px;height:42px;color:#000;font-family:Montserrat;font-size:25px;font-style:normal;font-weight:400;line-height:normal}/*# sourceMappingURL=style.module.css.map */

1
src/Components/css/style.module.css.map
View File

@ -1 +0,0 @@
{"version":3,"sources":["../Header/style.module.scss"],"names":[],"mappings":"AAEA,QACI,WAAA,CACA,SAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CACA,mBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,UAAA,CACA,YAAA,CACA,iBAAA,CACA,OAAA,CACA,QAAA,CAEJ,cACI,cAAA,CAEJ,gBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,mBAAA,CACA,kBAAA,CACA,WAAA,CACA,WAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA","file":"style.module.css"}

61
src/components/TableMeets.jsx Normal file
View File

@ -0,0 +1,61 @@
import React, { useState } from 'react';
import styled from 'styled-components';
let Table = styled.div({
width: 1520,
border: '1px solid black'
});
let List = styled.div({
display: 'flex',
// justifyContent: 'center'
});
let Date = styled.span({
marginRight: 100
});
let Time = styled.span({
marginRight: 100
});
let Name = styled.span({
marginRight: 100
});
const TableMeets = ({ events }) => {
const [isOpenMap, setIsOpenMap] = useState({});
const toggleDropdown = (eventId) => {
setIsOpenMap((prevIsOpenMap) => ({
...prevIsOpenMap,
[eventId]: !prevIsOpenMap[eventId]
}));
};
return (
<Table>
<ul>
{events.map((event) => (
<li key={event.id}>
<div>
<Date>{event.date}</Date>
<Time>{event.time}</Time>
<Name>{event.title}</Name>
<span>
<button onClick={() => toggleDropdown(event.id)}>Показать список мероприятий</button>
</span>
{isOpenMap[event.id] && (
<div>
<span>{event.speaker}</span>
<img src={event.avatar} alt={event.speaker} />
<p>{event.description}</p>
</div>
)}
</div>
</li>
))}
</ul>
</Table>
);
};
export default TableMeets;

68
src/components/fetchUtils/FetchUtils.jsx Normal file
View File

@ -0,0 +1,68 @@
/* 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;

18
src/components/fetchUtils/style.css Normal file
View File

@ -0,0 +1,18 @@
ul {
display: flex;
/* justify-content: center; */
flex-direction: column;
list-style: none;
}
ol {
display: flex;
/* justify-content: center; */
/* align-items: center; */
/* text-align: left; */
list-style: none;
}
li {
margin-right: 30px;
}

BIN
src/img/headerImg/OgettoLogo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB