add filter by area

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 = () => {
                     <SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
                     Ежемесячно
                 </PeriodButton>
-                <ClearButton>
+                <ClearButton onClick={() => setState(def_form)}>
                     <SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' />
                     Сбросить
                 </ClearButton>
             </PeriodFilter>
 
             <SearchBarFilter>
-                asbvccxcz
+                <SearchBarText>
+                    Площадь
+                    <span style={{color:'gray'}}> от </span>
+                    <FilterArea
+                        type='text'
+                        placeholder='—'
+                        maxLength='3' 
+                        value={state.area_from}
+                        onChange={(e) => setState({area_from: e.target.value})}/>
+
+                    <span style={{color:'gray'}}> до </span>
+                    <FilterArea
+                        type='text'
+                        placeholder='—'
+                        maxLength='3' 
+                        value={state.area_to}
+                        onChange={(e) => setState({area_to: e.target.value})}/>
+                </SearchBarText>
             </SearchBarFilter>
 
-            <SubmitBtn type='submit'>
+            <SubmitBtn onClick={() => console.log(state)}>
                 <SVGIcon src='/images/icons/search.svg' width='14' height='14' />
                 Показать варианты
             </SubmitBtn>