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

f

Browse Source
This commit is contained in:
Vsevo;od 2023-12-23 11:29:24 +03:00
parent 85afad5327
commit 64317df44c
4 changed files with 74 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,6 +68,8 @@ const HomePage = () => {
</div>
<Home></Home>
{/* <FetchUtils></FetchUtils> */}
<PostForm />
<EditForm />
</section>

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

@ -86,4 +86,4 @@
}
.search__descr {
margin-right: 25px;
}
}

65
src/components/Home/Home.jsx
View File

@ -2,16 +2,20 @@ import React from 'react';
import './style.css'
import styled from 'styled-components';
import { HttpApiMethods } from '../fetchUtils/FetchUtils';
import {useState} from 'react'
import EditForm from '../post/PostForm';
import Grid from '@mui/material/Grid';
import Card from '../Card';
import Box from '@mui/material/Box';
const httpApiMethods = new HttpApiMethods()
const meets = await httpApiMethods.GetMeetings()
const Home = () => {
const Home = () => {
const [count, setCount] = useState(7)
function extractDateTime(dateString) {
const dateTime = new Date(dateString);
const date = dateTime.toLocaleDateString();
@ -19,26 +23,47 @@ const Home = () => {
return { date, time };
}
const filterMeet = meets.filter( (item, index) => index <= count )
const allMeets = () => {
setCount(meets.length)
}
return (
<div className='wrapp'>
{Array.isArray(meets) ? (
meets.map((item, index) => (
<div className='event_card' key={index}>
<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>
<>
<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>
<h4 className="event-card__title">{item.title}</h4>
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
</div>
))
) : (
<p>Неверный тип данных с сервера!</p>
)}
{/* <EditForm></EditForm> */}
</div>
</Grid>
))
) : (
<p>Неверный тип данных с сервера!</p>
)}
{/* <EditForm></EditForm> */}
</Grid>
</Box>
<div className='allButton__container'>
<button onClick={allMeets} className='allButton'>Все мероприятия</button>
</div>
</>
);
}

27
src/components/Home/style.css
View File

@ -1,6 +1,6 @@
.event_card {
width: 292px;
height: 626px;
height: 586px;
flex-shrink: 0;
margin-top: 100px;
margin-right: 11px;
@ -82,4 +82,29 @@ 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;
}