finish index page (readonly)

pairent_frontend_react/src/pages/IndexPage/index.jsx

@@ -36,8 +36,8 @@ const SwiperImage = styled.div`
     background-repeat: no-repeat;
     background-size: cover;
 
-    width: 800px;
-    height: 400px;
+    width: 100%;
+    height: 100%;
 `;
 
 const Filters = styled.div`
@@ -45,6 +45,7 @@ const Filters = styled.div`
     height: 300px;
     width: 1150px;
     margin: 0 auto;
+    margin-bottom: 60px;
     border-radius: 20px;
     box-shadow: 0 2px 12px #00000060;
     padding: 30px;
@@ -134,6 +135,37 @@ const SearchBarInput = styled.input`
     outline: none;
 `;
 
+const PageButtons = styled.div`
+    margin: 60px auto;
+    width: fit-content
+`;
+
+const PageButton = styled.button`
+    background: #dedede;
+    width: 60px; height: 60px;
+    border-radius: 16px;
+    box-shadow: 0 1px 2px #20202060;
+    margin-right: 32px;
+    font-size: 20px;
+    font-weight: bold;
+
+    transition: 350ms ease;
+
+    &:hover {
+        box-shadow: 0 2px 4px #20202060;
+    }
+`;
+
+const CurrentPage = styled(PageButton)`
+    background: 0;
+    border: 2px solid royalblue;
+`;
+
+const IndexPageRoot = styled.div`
+    width: 1150px;
+    margin: 50px auto
+`;
+
 const FiltersForm = () => {
 
     const apart_sizes = [
@@ -279,15 +311,16 @@ export default class IndexPage extends React.Component {
 
     render() {
         const { page, pageSize } = this.state;
+        const pages = this.state.apartments.length / pageSize;
+
         const current_data = this.state.apartments.slice((page * pageSize), (page * pageSize) + pageSize);
-        console.log(current_data);
+        
 
         return (
-            <>
-                <div style={{ height: 30 }} />
+            <IndexPageRoot>
                 <Swiper
                     spaceBetween={4}
-                    style={{ width: 800, height: 250, borderRadius: 20 }}
+                    style={{ width: 1150, height: 200, borderRadius: 20 }}
 
                     modules={[ Scrollbar, Navigation ]}
                     scrollbar={{ enabled: true, draggable: true }}
@@ -318,7 +351,26 @@ export default class IndexPage extends React.Component {
                     </> :
                     null
                 }
-            </>
+
+                <PageButtons>
+                    {
+                        [...Array(pages)].map((_, i) => {
+                            if (i > 3 && i != pageSize - 1) {
+                                if (i == 4)
+                                    return <PageButton>...</PageButton>;
+                                return null;
+                            }
+
+                            if (i == page)
+                                return <CurrentPage>{i + 1}</CurrentPage>
+
+                            return (
+                                <PageButton>{i + 1}</PageButton>
+                            );
+                        })
+                    }
+                </PageButtons>
+            </IndexPageRoot>
         );
     }
 }