component: add BurgerIngredient into Burger component

master
oscarzhou 2020-12-09 21:05:37 +13:00
parent ffeb447dc1
commit 0d456766b0
4 changed files with 54 additions and 5 deletions

View 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;
}
}

View 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;

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classes from './burgerIngredient.css';
import classes from './BurgerIngredient.css';
class BurgerIngredient extends Component {
render() {
@ -43,4 +43,4 @@ BurgerIngredient.PropTypes = {
type: PropTypes.string.isRequired
};
export default burgerIngredient;
export default BurgerIngredient;

View File

@ -1,17 +1,18 @@
import React, { Component } from 'react';
import Aux from '../../hoc/Auxiliary';
import Burger from '../../components/Burger/Burger';
class BurgerBuilder extends Component {
render() {
return (
<Aux>
<div>Burger</div>
<Burger />
<div>Build Controls</div>
</Aux>
);
}
}
};
};
export default BurgerBuilder;