diff --git a/pairent_frontend_react/package.json b/pairent_frontend_react/package.json index a9c809e..a84c997 100644 --- a/pairent_frontend_react/package.json +++ b/pairent_frontend_react/package.json @@ -11,6 +11,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.0", + "react-select": "^5.7.3", "styled-components": "^6.0.0-rc.1", "swiper": "^9.2.4" }, diff --git a/pairent_frontend_react/src/pages/IndexPage/index.jsx b/pairent_frontend_react/src/pages/IndexPage/index.jsx index 4ef6024..75f8e8a 100644 --- a/pairent_frontend_react/src/pages/IndexPage/index.jsx +++ b/pairent_frontend_react/src/pages/IndexPage/index.jsx @@ -2,6 +2,7 @@ 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 Select from 'react-select'; import styled from 'styled-components'; import 'swiper/css'; @@ -75,7 +76,8 @@ const FilterText = styled.h1` user-select: none; padding-bottom: 6px; - border-bottom: 1px solid #f0f2f030; + border-bottom: 1px solid #f0f2f060; + margin-bottom: 20px; padding-bottom: 1px `; const ClearButton = styled(PeriodButton)` @@ -108,29 +110,51 @@ const SearchBarFilter = styled.div` `; const SearchBarText = styled.div` - position: relative; - top: 50%; - transform: translateY(-50%); + display: flex; + align-items: center +`; + +const SearchBarSpacer = styled.div` + height: 55px; + width: 1px; + border-left: 1px solid #c1c3c1; + display: inline-block; + margin: 0 20px `; const FilterArea = styled.input` border: 0; background: 0; margin: 0 16px; + margin-right: 0; font-size: 105%; width: 30px; outline: none; `; +const ListSelect = styled.datalist` + +`; + const FiltersForm = () => { + const apart_sizes = [ + { value: 0, label: "Гостинка" }, + { value: 1, label: '1 комната' }, + { value: 2, label: '2 комнаты' }, + { value: 3, label: '3 комнаты' }, + { value: 4, label: '4 комнаты' } + ]; + const def_form = { per_day: false, per_month: false, area_from: 0, - area_to: 0 + area_to: 0, + rooms: apart_sizes[2] }; + const [ state, setState_ ] = useState(def_form); const setState = (new_state) => { @@ -143,13 +167,13 @@ const FiltersForm = () => { setState({per_day: !state.per_day})}> Посуточно setState({per_month: !state.per_month})}> Ежемесячно @@ -163,7 +187,7 @@ const FiltersForm = () => { Площадь - от + от { value={state.area_from} onChange={(e) => setState({area_from: e.target.value})}/> - до + до setState({area_to: e.target.value})}/> + + + +