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
|
Line | |
---|
1 | import React from "react";
|
---|
2 | import {Col, Row, Image, Container} from "react-bootstrap";
|
---|
3 | import Carousel from "react-bootstrap/Carousel";
|
---|
4 |
|
---|
5 | const MenuItem = (props) => {
|
---|
6 |
|
---|
7 | const data = props.data;
|
---|
8 | console.log(props)
|
---|
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">
|
---|
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>
|
---|
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.