Last change
on this file since efaa053 was 0f5aa27, checked in by darsov2 <62809499+darsov2@…>, 8 months ago |
ouath, mailing impl
|
-
Property mode
set to
100644
|
File size:
3.2 KB
|
Rev | Line | |
---|
[e6c2521] | 1 | import React from "react";
|
---|
| 2 | import {Col, Row, Image, Container} from "react-bootstrap";
|
---|
[07f4e8b] | 3 | import Carousel from "react-bootstrap/Carousel";
|
---|
[e6c2521] | 4 |
|
---|
| 5 | const MenuItem = (props) => {
|
---|
| 6 |
|
---|
| 7 | const data = props.data;
|
---|
[07f4e8b] | 8 | console.log(props)
|
---|
[e6c2521] | 9 | return (<>
|
---|
| 10 |
|
---|
| 11 | <a href="#" style={{textDecoration: "none", color: "black"}}>
|
---|
| 12 | <Container className="py-3 px-1 my-4"
|
---|
| 13 | style={{
|
---|
| 14 | border: "4px solid #159895",
|
---|
| 15 | borderRadius: "1em",
|
---|
| 16 | boxShadow: "0 3px 5px #159895",
|
---|
| 17 | maxWidth: "90%"
|
---|
| 18 | }}>
|
---|
| 19 | <Row>
|
---|
| 20 | <Col className="d-flex justify-content-center mb-3">
|
---|
[07f4e8b] | 21 | <Carousel>
|
---|
| 22 | {props.images.map((image) => {
|
---|
| 23 | let link = image.url;
|
---|
| 24 | if (image.url.includes('Desktop')) {
|
---|
| 25 | link = 'http://localhost:8080/download?fileName=' + encodeURIComponent(image.url);
|
---|
| 26 | }
|
---|
| 27 | return (
|
---|
| 28 | <Carousel.Item>
|
---|
| 29 | <img
|
---|
| 30 | className="d-block w-100 h-400 rounded-5"
|
---|
| 31 | src={link}
|
---|
| 32 | alt="First slide"
|
---|
| 33 | style={{
|
---|
| 34 | height: "7em",
|
---|
| 35 | borderRadius: "1em",
|
---|
| 36 | boxShadow: "0 4px 20px lightblue",
|
---|
| 37 | maxWidth: "100%",
|
---|
| 38 | }}
|
---|
| 39 | />
|
---|
| 40 | </Carousel.Item>
|
---|
| 41 | )
|
---|
| 42 | })}
|
---|
| 43 | {props.images.length == 0 && <Carousel.Item>
|
---|
| 44 | <Image
|
---|
| 45 | src="https://www.tasteofhome.com/wp-content/uploads/2019/01/medium-rare-steak-shutterstock_706040446.jpg"
|
---|
| 46 | style={{
|
---|
| 47 | height: "7em",
|
---|
| 48 | borderRadius: "1em",
|
---|
| 49 | boxShadow: "0 4px 20px lightblue",
|
---|
| 50 | maxWidth: "100%",
|
---|
| 51 | }}
|
---|
| 52 | ></Image>
|
---|
| 53 | </Carousel.Item>}
|
---|
| 54 | </Carousel>
|
---|
[e6c2521] | 55 | </Col>
|
---|
| 56 | </Row>
|
---|
| 57 | <Row>
|
---|
| 58 | <Col className="d-flex flex-column justify-content-center " style={{textAlign: "center"}}>
|
---|
| 59 | <h4>{data.name}</h4>
|
---|
| 60 | <h6>{data.ingredients}</h6>
|
---|
| 61 | </Col>
|
---|
| 62 | </Row>
|
---|
| 63 | <Row>
|
---|
| 64 | <Col className="d-flex flex-column justify-content-center align-content-center">
|
---|
| 65 |
|
---|
| 66 | <h5>Цена: {data.price}$</h5>
|
---|
| 67 | </Col>
|
---|
| 68 | </Row>
|
---|
| 69 | </Container>
|
---|
| 70 | </a>
|
---|
| 71 |
|
---|
| 72 | </>)
|
---|
| 73 | }
|
---|
| 74 |
|
---|
| 75 | export default MenuItem; |
---|
Note:
See
TracBrowser
for help on using the repository browser.