component: add BurgerIngredient into Burger component
This commit is contained in:
parent
ffeb447dc1
commit
0d456766b0
31
src/components/Burger/Burger.css
Normal file
31
src/components/Burger/Burger.css
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.Burger {
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
height: 250px;
|
||||||
|
overflow: scroll;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 400px) and (min-height: 400px) {
|
||||||
|
.Burger {
|
||||||
|
width: 350px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 500px) and (min-height: 401px) {
|
||||||
|
.Burger {
|
||||||
|
width: 450px;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1000px) and (min-height: 700px) {
|
||||||
|
.Burger {
|
||||||
|
width: 700px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
}
|
17
src/components/Burger/Burger.js
Normal file
17
src/components/Burger/Burger.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import classes from './Burger.css';
|
||||||
|
import BurgerIngredient from './BurgerIngredient/BurgerIngredient';
|
||||||
|
|
||||||
|
const burger = () => {
|
||||||
|
return (
|
||||||
|
<div className={classes.Burger}>
|
||||||
|
<BurgerIngredient type="bread-top" />
|
||||||
|
<BurgerIngredient type="meat" />
|
||||||
|
<BurgerIngredient type="cheese" />
|
||||||
|
<BurgerIngredient type="bread-bottom" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default burger;
|
@ -1,7 +1,7 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import classes from './burgerIngredient.css';
|
import classes from './BurgerIngredient.css';
|
||||||
|
|
||||||
class BurgerIngredient extends Component {
|
class BurgerIngredient extends Component {
|
||||||
render() {
|
render() {
|
||||||
@ -43,4 +43,4 @@ BurgerIngredient.PropTypes = {
|
|||||||
type: PropTypes.string.isRequired
|
type: PropTypes.string.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default burgerIngredient;
|
export default BurgerIngredient;
|
@ -1,17 +1,18 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
import Aux from '../../hoc/Auxiliary';
|
import Aux from '../../hoc/Auxiliary';
|
||||||
|
import Burger from '../../components/Burger/Burger';
|
||||||
|
|
||||||
class BurgerBuilder extends Component {
|
class BurgerBuilder extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Aux>
|
<Aux>
|
||||||
<div>Burger</div>
|
<Burger />
|
||||||
<div>Build Controls</div>
|
<div>Build Controls</div>
|
||||||
</Aux>
|
</Aux>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
|
|
||||||
export default BurgerBuilder;
|
export default BurgerBuilder;
|
||||||
|
Loading…
Reference in New Issue
Block a user