1 | import React from "react";
|
---|
2 | import { Col, Form, InputGroup, NavDropdown, Row, Button } from "react-bootstrap";
|
---|
3 | import Dropdown from "react-bootstrap/Dropdown";
|
---|
4 | import { BiFilterAlt } from "react-icons/bi";
|
---|
5 |
|
---|
6 | const FilterButton = () => {
|
---|
7 | return (
|
---|
8 | <Dropdown autoClose="outside">
|
---|
9 | <Dropdown.Toggle variant="success" id="dropdown-basic" size="lg">
|
---|
10 | <span className="ikona my-1">
|
---|
11 | <BiFilterAlt />
|
---|
12 | </span>
|
---|
13 | <span className="ikona mx-3">Филтри</span>
|
---|
14 | </Dropdown.Toggle>
|
---|
15 |
|
---|
16 | <Dropdown.Menu>
|
---|
17 | <Dropdown.Item>
|
---|
18 | <NavDropdown
|
---|
19 | id="filter-room-type"
|
---|
20 | title="Тип на соба"
|
---|
21 | menuVariant="light"
|
---|
22 | drop="start"
|
---|
23 | autoClose="outside"
|
---|
24 | >
|
---|
25 | <NavDropdown.Item>
|
---|
26 | <Form.Check type="checkbox" id={`check-room`} label="Соба" />
|
---|
27 | </NavDropdown.Item>
|
---|
28 | <NavDropdown.Item>
|
---|
29 | <Form.Check
|
---|
30 | type="checkbox"
|
---|
31 | id={`check-apartment `}
|
---|
32 | label="Апартман"
|
---|
33 | />
|
---|
34 | </NavDropdown.Item>
|
---|
35 | <NavDropdown.Item href="#action/3.3">
|
---|
36 | <Form.Check type="checkbox" id={`default-check`} label="Стан" />
|
---|
37 | </NavDropdown.Item>
|
---|
38 | </NavDropdown>
|
---|
39 | </Dropdown.Item>
|
---|
40 | <Dropdown.Item>
|
---|
41 | <NavDropdown
|
---|
42 | id="filter-room-type"
|
---|
43 | title="Број на ѕвезди"
|
---|
44 | menuVariant="light"
|
---|
45 | drop="start"
|
---|
46 | autoClose="outside"
|
---|
47 | >
|
---|
48 | <NavDropdown.Item>
|
---|
49 | <Form.Check type="checkbox" id={`check-stars-1`} label="1" />
|
---|
50 | </NavDropdown.Item>
|
---|
51 | <NavDropdown.Item>
|
---|
52 | <Form.Check type="checkbox" id={`check-stars-2`} label="2" />
|
---|
53 | </NavDropdown.Item>
|
---|
54 | <NavDropdown.Item href="#action/3.3">
|
---|
55 | <Form.Check type="checkbox" id={`check-stars-3`} label="3" />
|
---|
56 | </NavDropdown.Item>
|
---|
57 | <NavDropdown.Item href="#action/3.3">
|
---|
58 | <Form.Check type="checkbox" id={`check-stars-4`} label="4" />
|
---|
59 | </NavDropdown.Item>
|
---|
60 | <NavDropdown.Item href="#action/3.3">
|
---|
61 | <Form.Check type="checkbox" id={`check-stars-5`} label="5" />
|
---|
62 | </NavDropdown.Item>
|
---|
63 | </NavDropdown>
|
---|
64 | </Dropdown.Item>
|
---|
65 | <Dropdown.Item>
|
---|
66 | <NavDropdown
|
---|
67 | id="filter-price-range"
|
---|
68 | title="Ценовен ранг"
|
---|
69 | menuVariant="light"
|
---|
70 | drop="start"
|
---|
71 | autoClose="outside"
|
---|
72 | >
|
---|
73 | <NavDropdown.Item>
|
---|
74 | <Row className="gx-3">
|
---|
75 | <Col className="mb-3">
|
---|
76 | <Form.Control
|
---|
77 | size="sm"
|
---|
78 | type="text"
|
---|
79 | placeholder="Од"
|
---|
80 | id="price-from"
|
---|
81 | ></Form.Control>
|
---|
82 | </Col>
|
---|
83 | <Col>
|
---|
84 | <Form.Control
|
---|
85 | size="sm"
|
---|
86 | type="text"
|
---|
87 | placeholder="До"
|
---|
88 | id="price-to"
|
---|
89 | ></Form.Control>
|
---|
90 | </Col>
|
---|
91 | <Col>
|
---|
92 | <Button
|
---|
93 | type="submit"
|
---|
94 | style={{ backgroundColor: "#159895" }}
|
---|
95 | size="sm"
|
---|
96 | className="w-100"
|
---|
97 | >
|
---|
98 | <span className="ikona mx-3">ОК</span>
|
---|
99 | </Button>
|
---|
100 | </Col>
|
---|
101 | </Row>
|
---|
102 | </NavDropdown.Item>
|
---|
103 | </NavDropdown>
|
---|
104 | </Dropdown.Item>
|
---|
105 | <Dropdown.Item href="#/action-1">
|
---|
106 | <Form.Check type="checkbox" id={`default-check`} label="Паркинг" />
|
---|
107 | </Dropdown.Item>
|
---|
108 | <Dropdown.Item href="#/action-2">
|
---|
109 | <Form.Check
|
---|
110 | type="checkbox"
|
---|
111 | id={`default-check`}
|
---|
112 | label="Pet friendly"
|
---|
113 | />
|
---|
114 | </Dropdown.Item>
|
---|
115 | <Dropdown.Item href="#/action-3">
|
---|
116 | <Form.Check type="checkbox" id={`default-check`} label="Кујна" />
|
---|
117 | </Dropdown.Item>
|
---|
118 | <Dropdown.Item href="#/action-3">
|
---|
119 | <Form.Check type="checkbox" id={`default-check`} label="Интернет" />
|
---|
120 | </Dropdown.Item>
|
---|
121 | <Dropdown.Item href="#/action-3">
|
---|
122 | <Form.Check type="checkbox" id={`default-check`} label="Тераса" />
|
---|
123 | </Dropdown.Item>
|
---|
124 | <Dropdown.Item href="#/action-3">
|
---|
125 | <Form.Check
|
---|
126 | type="checkbox"
|
---|
127 | id={`default-check`}
|
---|
128 | label="Климатизирано"
|
---|
129 | />
|
---|
130 | </Dropdown.Item>
|
---|
131 | </Dropdown.Menu>
|
---|
132 | </Dropdown>
|
---|
133 | );
|
---|
134 | };
|
---|
135 |
|
---|
136 | export default FilterButton;
|
---|