[0f5aa27] | 1 | import {Col, Container, Image, Row, Button, Badge} from "react-bootstrap";
|
---|
[e6c2521] | 2 | import {BsFillPersonFill} from "react-icons/bs";
|
---|
| 3 | import {MdOutlineLocalOffer} from "react-icons/md";
|
---|
| 4 | import {Link} from "react-router-dom";
|
---|
| 5 |
|
---|
| 6 | function HotelListing(props) {
|
---|
[0f5aa27] | 7 |
|
---|
| 8 | const getMarketingMessage = (num) => {
|
---|
| 9 | switch (num){
|
---|
| 10 | case 1:
|
---|
| 11 | return "Достапно само денес"
|
---|
| 12 | case 2:
|
---|
| 13 | return "Последна соба"
|
---|
| 14 | case 3:
|
---|
| 15 | return "Специјална цена"
|
---|
| 16 | }
|
---|
| 17 | }
|
---|
| 18 |
|
---|
[e6c2521] | 19 | console.log(props)
|
---|
[0f5aa27] | 20 | const randomInt = Math.floor(Math.random() * (3)) + 1;
|
---|
[e6c2521] | 21 | return (
|
---|
| 22 | <>
|
---|
| 23 | <Container
|
---|
| 24 | className="py-3 px-1 my-4"
|
---|
| 25 | style={{
|
---|
| 26 | border: "4px solid lightblue",
|
---|
| 27 | borderRadius: "1em",
|
---|
| 28 | boxShadow: "0 3px 5px lightblue",
|
---|
| 29 | maxWidth: "60%",
|
---|
[0f5aa27] | 30 | backgroundColor: props.data.promoted ? "#e1f7fa" : ""
|
---|
[e6c2521] | 31 | }}
|
---|
| 32 | >
|
---|
| 33 | <Row className="mx-1 my-1" style={{textAlign: "left"}}>
|
---|
| 34 | <Col className="d-flex justify-content-center">
|
---|
| 35 | <Image
|
---|
| 36 | src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
|
---|
| 37 | style={{
|
---|
| 38 | height: "15em",
|
---|
| 39 | borderRadius: "1em",
|
---|
| 40 | boxShadow: "0 4px 20px lightblue",
|
---|
| 41 | maxWidth: "100%",
|
---|
| 42 | }}
|
---|
| 43 | ></Image>
|
---|
| 44 | </Col>
|
---|
| 45 | <Col>
|
---|
| 46 | <Row>
|
---|
[0f5aa27] | 47 | <h3>{props.data.hotelName}
|
---|
| 48 | {props.data.marketed && randomInt !== 3 && <h6><Badge bg="warning">{getMarketingMessage(randomInt)}</Badge></h6>}
|
---|
| 49 | {props.data.promoted && <h6><Badge bg="primary">Најпопуларно</Badge></h6>}
|
---|
| 50 | </h3>
|
---|
[e6c2521] | 51 | </Row>
|
---|
| 52 | <Row>
|
---|
| 53 | <h8>{props.data.hotelLocation}, Македонија</h8>
|
---|
| 54 | </Row>
|
---|
| 55 | <Row className="mt-3 ml-2">
|
---|
| 56 | <Col className="md-4">
|
---|
| 57 | <h4 style={{fontWeight: "bold"}}></h4>
|
---|
| 58 | </Col>
|
---|
| 59 | </Row>
|
---|
| 60 | <Row>
|
---|
| 61 | <Col className="ml-5">
|
---|
| 62 | {/* <h5>{props.data.hotelCaption}</h5> */}
|
---|
| 63 | <h5>Краток опис</h5>
|
---|
| 64 | </Col>
|
---|
| 65 | </Row>
|
---|
| 66 | <Row>
|
---|
| 67 | <Col>
|
---|
| 68 | <h6>{props.data.hotelDescripiton}</h6>
|
---|
| 69 | </Col>
|
---|
| 70 | </Row>
|
---|
| 71 | </Col>
|
---|
| 72 | <Col>
|
---|
| 73 | <Container
|
---|
| 74 | fluid
|
---|
| 75 | className="px-0"
|
---|
| 76 | style={{
|
---|
| 77 | display: "flex",
|
---|
| 78 | flexDirection: "column",
|
---|
| 79 | alignItems: "flex-end",
|
---|
| 80 | justifyContent: "space-between",
|
---|
| 81 | height: "100%",
|
---|
| 82 | }}
|
---|
| 83 | >
|
---|
| 84 | <Row className="justify-self-end" style={{textAlign: "right"}}>
|
---|
| 85 | <Col style={{textAlign: "right"}}>
|
---|
| 86 | <h6>Многу добро</h6>
|
---|
| 87 | </Col>
|
---|
| 88 | <Col>
|
---|
| 89 | <span
|
---|
| 90 | style={{
|
---|
| 91 | backgroundColor: "#159895",
|
---|
| 92 | padding: "0.75em",
|
---|
| 93 | fontWeight: "bold",
|
---|
| 94 | fontSize: "1.25rem",
|
---|
| 95 | borderRadius: "0.75em",
|
---|
| 96 | color: "white",
|
---|
| 97 | }}
|
---|
| 98 | >
|
---|
[07f4e8b] | 99 | {(props.data.hotelReviews.reduce((sum, r) => sum + r.numStar, 0) / props.data.hotelReviews.length).toFixed(1)}
|
---|
[e6c2521] | 100 | </span>
|
---|
| 101 | </Col>
|
---|
| 102 | </Row>
|
---|
| 103 | <Row className="w-75 justify-self-end">
|
---|
| 104 | <Container
|
---|
| 105 | className="justify-self-end"
|
---|
| 106 | style={{textAlign: "right"}}
|
---|
| 107 | >
|
---|
| 108 | <Row>
|
---|
[0f5aa27] | 109 | <h4>{props.data.marketed && randomInt === 3 && <h6><Badge bg="warning">{getMarketingMessage(randomInt)}</Badge></h6>}
|
---|
| 110 | {props.data.totalPrice}$</h4>
|
---|
[e6c2521] | 111 | </Row>
|
---|
| 112 | <Row className="w-100">
|
---|
| 113 | <Link
|
---|
| 114 | to="/details/hotel"
|
---|
| 115 | state={{data: props.data, from: props.from, to: props.to}}
|
---|
| 116 | className="w-100"
|
---|
| 117 | >
|
---|
| 118 | <Button
|
---|
| 119 | className="m-2"
|
---|
| 120 | size="md"
|
---|
| 121 | style={{backgroundColor: "#159895"}}
|
---|
| 122 | onClick={() => {
|
---|
| 123 | }}
|
---|
| 124 | >
|
---|
| 125 | <MdOutlineLocalOffer size={"1.5em"}></MdOutlineLocalOffer>{" "}
|
---|
| 126 | Кон понудата
|
---|
| 127 | </Button>
|
---|
| 128 | </Link>
|
---|
| 129 | </Row>
|
---|
| 130 | </Container>
|
---|
| 131 | </Row>
|
---|
| 132 | </Container>
|
---|
| 133 | </Col>
|
---|
| 134 | </Row>
|
---|
| 135 | </Container>
|
---|
| 136 | </>
|
---|
| 137 | );
|
---|
| 138 | }
|
---|
| 139 |
|
---|
| 140 | export default HotelListing;
|
---|