[e6c2521] | 1 | import React from "react";
|
---|
[07f4e8b] | 2 | import {Button, Col, Container, Form, InputGroup, Row} from "react-bootstrap";
|
---|
| 3 | import {FaMagnet} from "react-icons/fa"
|
---|
| 4 | import {HiMagnifyingGlass} from "react-icons/hi2"
|
---|
[e6c2521] | 5 | import useFormData from "../Hooks/useFormData";
|
---|
| 6 |
|
---|
| 7 | function TabFormHotel() {
|
---|
| 8 |
|
---|
[07f4e8b] | 9 | const {formData, onFormChange, setFormData, onCheckBoxChange} = useFormData({
|
---|
| 10 | hotelLocation: undefined,
|
---|
| 11 | dateFrom: undefined,
|
---|
| 12 | dateTo: undefined,
|
---|
| 13 | numBeds: undefined,
|
---|
| 14 | flexible: false,
|
---|
| 15 | })
|
---|
[e6c2521] | 16 |
|
---|
[07f4e8b] | 17 | return (
|
---|
| 18 | <Form className='rounded-5'>
|
---|
| 19 | <Row>
|
---|
| 20 | <Col>
|
---|
| 21 | <Form.Floating className="mb-3">
|
---|
| 22 | <Form.Control
|
---|
| 23 | size="md"
|
---|
| 24 | type="text"
|
---|
| 25 | placeholder="Каде ќе патувате?:"
|
---|
| 26 | id="location"
|
---|
| 27 | name="hotelLocation"
|
---|
| 28 | value={formData.hotelLocation}
|
---|
| 29 | onChange={onFormChange}
|
---|
| 30 | ></Form.Control>
|
---|
| 31 | <label htmlFor="location">Локација:</label>
|
---|
| 32 | </Form.Floating>
|
---|
| 33 | <div className="mb-3">
|
---|
| 34 | <Form.Check
|
---|
| 35 | type={"checkbox"}
|
---|
| 36 | id={`default-checkbox}`}
|
---|
| 37 | label={`флексибилност +- 3 дена`}
|
---|
| 38 | onChange={onCheckBoxChange}
|
---|
| 39 | name={'flexible'}
|
---|
| 40 | value={formData.flexible}
|
---|
| 41 | />
|
---|
| 42 | </div>
|
---|
| 43 | </Col>
|
---|
| 44 | <Col>
|
---|
| 45 | <Form.Floating className="mb-3">
|
---|
| 46 | <Form.Control
|
---|
| 47 | size="md"
|
---|
| 48 | type="date"
|
---|
| 49 | placeholder="Датум на пристигнување:"
|
---|
| 50 | id="dateFrom"
|
---|
| 51 | name="dateFrom"
|
---|
| 52 | value={formData.dateFrom}
|
---|
| 53 | onChange={onFormChange}
|
---|
| 54 | ></Form.Control>
|
---|
| 55 | <label htmlFor="dateFrom">Датум на пристигнување:</label>
|
---|
| 56 | </Form.Floating>
|
---|
| 57 | </Col>
|
---|
| 58 | <Col>
|
---|
| 59 | <Form.Floating className="mb-3">
|
---|
| 60 | <Form.Control
|
---|
| 61 | size="md"
|
---|
| 62 | type="date"
|
---|
| 63 | placeholder="Датум на заминување:"
|
---|
| 64 | id="dateTo"
|
---|
| 65 | name="dateTo"
|
---|
| 66 | value={formData.dateTo}
|
---|
| 67 | onChange={onFormChange}
|
---|
| 68 | ></Form.Control>
|
---|
| 69 | <label htmlFor="dateTo">Датум на заминување:</label>
|
---|
| 70 | </Form.Floating>
|
---|
| 71 | </Col>
|
---|
| 72 | <Col>
|
---|
| 73 | <Form.Floating className="mb-3">
|
---|
| 74 | <Form.Control
|
---|
| 75 | size="md"
|
---|
| 76 | type="number"
|
---|
| 77 | placeholder="Број на гости:"
|
---|
| 78 | id="floatingPassengers"
|
---|
| 79 | name="numBeds"
|
---|
| 80 | value={formData.numBeds}
|
---|
| 81 | onChange={onFormChange}
|
---|
| 82 | ></Form.Control>
|
---|
| 83 | <label htmlFor="floatingPassengers">Број на гости:</label>
|
---|
| 84 | </Form.Floating>
|
---|
[e6c2521] | 85 |
|
---|
[07f4e8b] | 86 | <Form.Group className="my-1">
|
---|
| 87 | <Button type="submit" style={{backgroundColor: "#159895"}} size="lg"
|
---|
| 88 | onClick={(e) => {
|
---|
| 89 | e.preventDefault();
|
---|
| 90 | window.location.href = `/search/hotel/${formData.hotelLocation}/${formData.dateFrom}/${formData.dateTo}/${formData.numBeds}/${formData.flexible}`
|
---|
| 91 | }}>
|
---|
| 92 | <span className="ikona my-1"><HiMagnifyingGlass/></span>
|
---|
| 93 | <span className="ikona mx-3">Пребарај</span>
|
---|
| 94 | </Button>
|
---|
| 95 | </Form.Group>
|
---|
| 96 | </Col>
|
---|
[e6c2521] | 97 |
|
---|
[07f4e8b] | 98 | </Row>
|
---|
| 99 | </Form>
|
---|
| 100 | );
|
---|
[e6c2521] | 101 | }
|
---|
| 102 |
|
---|
| 103 | export default TabFormHotel;
|
---|