f

src/Components/HomePage/index.jsx

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

src/Components/HomePage/style.module.scss

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

src/components/Home/Home.jsx

@@ -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>
+        </>
+        
+        
     );
 }
 

src/components/Home/style.css

@@ -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;
 }