182 lines
4.5 KiB
JavaScript
182 lines
4.5 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import { Scrollbar, Navigation } from 'swiper/core';
|
|
import ISVGIcon from '../../components/UI/Icon/SVGIcon';
|
|
import { Formik, Field, Form } from 'formik';
|
|
|
|
import styled from 'styled-components';
|
|
import 'swiper/css';
|
|
import 'swiper/css/scrollbar';
|
|
import 'swiper/css/navigation';
|
|
|
|
// swiper customization
|
|
import './swiper.css';
|
|
|
|
|
|
const SVGIcon = styled(ISVGIcon)`
|
|
margin-left:0;
|
|
`;
|
|
|
|
const Title = styled.p`
|
|
font-size: 20pt;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
margin: 32px 0;
|
|
text-shadow: 0 2px 1px #00000020;
|
|
`;
|
|
|
|
const HighlightWord = styled.span`
|
|
color: cornflowerblue;
|
|
`;
|
|
|
|
const SwiperImage = styled.div`
|
|
background: url(${props => props.src ? props.src : ''});
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
width: 800px;
|
|
height: 400px;
|
|
`;
|
|
|
|
const Filters = styled.div`
|
|
background: url(/images/filter.png);
|
|
height: 300px;
|
|
width: 1150px;
|
|
margin: 0 auto;
|
|
border-radius: 20px;
|
|
box-shadow: 0 2px 12px #00000060;
|
|
padding: 30px;
|
|
text-shadow: 0 2px 16px #ffffffa0;
|
|
`;
|
|
|
|
const PeriodFilter = styled.div`
|
|
display: block;
|
|
|
|
margin: 12px 0;
|
|
`;
|
|
|
|
const PeriodButton = styled.button`
|
|
width: fit-content;
|
|
height: 27px;
|
|
display: inline-block;
|
|
margin-right: 16px;
|
|
|
|
border-radius: 14px;
|
|
padding: 0 16px;
|
|
box-shadow: 0 2px 16px #ffffff30;
|
|
|
|
color: ${props => props.active ? 'green' : 'black'};
|
|
box-sizing: border-box;
|
|
${props => props.active ? 'font-weight: 600;' : ''}
|
|
`;
|
|
|
|
const FilterText = styled.h1`
|
|
font-size: 16pt;
|
|
color: #f0f4f0;
|
|
user-select: none;
|
|
|
|
padding-bottom: 6px;
|
|
border-bottom: 1px solid #f0f2f030;
|
|
`;
|
|
|
|
const ClearButton = styled(PeriodButton)`
|
|
float: right;
|
|
color: darkred;
|
|
margin-right: 0;
|
|
`;
|
|
|
|
const SearchBarFilter = styled.div`
|
|
background: #f2f3f2;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
height: 56px;
|
|
margin-top: 12px;
|
|
font-weight: 400
|
|
`;
|
|
|
|
const SubmitBtn = styled.button`
|
|
background: darkblue;
|
|
`;
|
|
|
|
const FiltersForm = () => {
|
|
|
|
const def_form = {
|
|
per_day: false,
|
|
per_month: false
|
|
};
|
|
|
|
const submitted = (a) => {
|
|
console.log(a);
|
|
}
|
|
|
|
return (
|
|
<Formik
|
|
initialValues={def_form}
|
|
onSubmit={async (values) => {
|
|
console.log(values);
|
|
}}
|
|
>
|
|
<Form>
|
|
<Filters>
|
|
<FilterText>Фильтры</FilterText>
|
|
|
|
<PeriodFilter>
|
|
<PeriodButton>
|
|
<SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' />
|
|
Посуточно
|
|
</PeriodButton>
|
|
<PeriodButton>
|
|
<SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
|
|
Ежемесячно
|
|
</PeriodButton>
|
|
<ClearButton>
|
|
<SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' />
|
|
Сбросить
|
|
</ClearButton>
|
|
</PeriodFilter>
|
|
|
|
<SearchBarFilter>
|
|
asbvccxcz
|
|
</SearchBarFilter>
|
|
|
|
<button type='submit'>
|
|
Показать варианты
|
|
</button>
|
|
</Filters>
|
|
</Form>
|
|
</Formik>
|
|
);
|
|
}
|
|
|
|
export default function IndexPage(props) {
|
|
return (
|
|
<>
|
|
<div style={{ height: 30 }} />
|
|
<Swiper
|
|
spaceBetween={4}
|
|
style={{ width: 800, height: 250, borderRadius: 20 }}
|
|
|
|
modules={[ Scrollbar, Navigation ]}
|
|
scrollbar={{ enabled: true, draggable: true }}
|
|
navigation={{ enabled: true }}
|
|
loop={ true }
|
|
autoplay={{ delay: 7 }}
|
|
>
|
|
<SwiperSlide>
|
|
<SwiperImage src='/images/house-s.jpg' />
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<SwiperImage src='/images/house-s-2.jpg' />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
|
|
<Title>
|
|
Выбор квартиры во
|
|
<HighlightWord> Владивостоке</HighlightWord>
|
|
</Title>
|
|
|
|
<FiltersForm />
|
|
|
|
</>
|
|
);
|
|
} |