diff --git a/pairent_frontend_react/src/pages/IndexPage/index.jsx b/pairent_frontend_react/src/pages/IndexPage/index.jsx
index 721f83d..4ef6024 100644
--- a/pairent_frontend_react/src/pages/IndexPage/index.jsx
+++ b/pairent_frontend_react/src/pages/IndexPage/index.jsx
@@ -84,14 +84,6 @@ const ClearButton = styled(PeriodButton)`
margin-right: 0;
`;
-const SearchBarFilter = styled.div`
- background: #f2f3f2;
- border-radius: 12px;
- width: 100%;
- height: 56px;
- margin: 12px 0;
- font-weight: 400
-`;
const SubmitBtn = styled.button`
background: royalblue;
@@ -105,17 +97,44 @@ const SubmitBtn = styled.button`
}
`;
+const SearchBarFilter = styled.div`
+ background: #f2f3f2;
+ border-radius: 12px;
+ width: 100%;
+ height: 56px;
+ margin: 12px 0;
+ font-weight: 400;
+ padding: 0 16px
+`;
+
+const SearchBarText = styled.div`
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+`;
+
+const FilterArea = styled.input`
+ border: 0; background: 0;
+ margin: 0 16px;
+ font-size: 105%;
+ width: 30px;
+ outline: none;
+`;
+
const FiltersForm = () => {
const def_form = {
per_day: false,
- per_month: false
+ per_month: false,
+
+ area_from: 0,
+ area_to: 0
};
- const [ state, setState ] = useState(def_form);
+ const [ state, setState_ ] = useState(def_form);
- const submitted = (a) => {
- console.log(a);
+ const setState = (new_state) => {
+ return setState_({...state, ...new_state});
}
return (
@@ -135,17 +154,34 @@ const FiltersForm = () => {
Ежемесячно
-
+ setState(def_form)}>
Сбросить
- asbvccxcz
+
+ Площадь
+ от
+ setState({area_from: e.target.value})}/>
+
+ до
+ setState({area_to: e.target.value})}/>
+
-
+ console.log(state)}>
Показать варианты