finish index page (readonly)

This commit is contained in:
b1ek 2023-05-09 11:40:59 +10:00
parent 0d1646962f
commit 4b55008f16
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 59 additions and 7 deletions

View File

@ -36,8 +36,8 @@ const SwiperImage = styled.div`
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
width: 800px; width: 100%;
height: 400px; height: 100%;
`; `;
const Filters = styled.div` const Filters = styled.div`
@ -45,6 +45,7 @@ const Filters = styled.div`
height: 300px; height: 300px;
width: 1150px; width: 1150px;
margin: 0 auto; margin: 0 auto;
margin-bottom: 60px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 2px 12px #00000060; box-shadow: 0 2px 12px #00000060;
padding: 30px; padding: 30px;
@ -134,6 +135,37 @@ const SearchBarInput = styled.input`
outline: none; 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 FiltersForm = () => {
const apart_sizes = [ const apart_sizes = [
@ -279,15 +311,16 @@ export default class IndexPage extends React.Component {
render() { render() {
const { page, pageSize } = this.state; const { page, pageSize } = this.state;
const pages = this.state.apartments.length / pageSize;
const current_data = this.state.apartments.slice((page * pageSize), (page * pageSize) + pageSize); const current_data = this.state.apartments.slice((page * pageSize), (page * pageSize) + pageSize);
console.log(current_data);
return ( return (
<> <IndexPageRoot>
<div style={{ height: 30 }} />
<Swiper <Swiper
spaceBetween={4} spaceBetween={4}
style={{ width: 800, height: 250, borderRadius: 20 }} style={{ width: 1150, height: 200, borderRadius: 20 }}
modules={[ Scrollbar, Navigation ]} modules={[ Scrollbar, Navigation ]}
scrollbar={{ enabled: true, draggable: true }} scrollbar={{ enabled: true, draggable: true }}
@ -318,7 +351,26 @@ export default class IndexPage extends React.Component {
</> : </> :
null 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>
); );
} }
} }