├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.js ├── assets │ └── images │ │ └── burger-logo.png ├── axios-orders.js ├── components │ ├── Burger │ │ ├── BuildControls │ │ │ ├── BuildControl │ │ │ │ ├── BuildControl.jsx │ │ │ │ └── BuildControl.module.css │ │ │ ├── BuildControls.jsx │ │ │ └── BuildControls.module.css │ │ ├── Burger.jsx │ │ ├── Burger.module.css │ │ ├── BurgerIngredient │ │ │ ├── BurgerIngredient.jsx │ │ │ └── BurgerIngredient.module.css │ │ └── OrderSummary │ │ │ └── OrderSummary.jsx │ ├── Logo │ │ ├── Logo.jsx │ │ └── Logo.module.css │ ├── Navigation │ │ ├── NavigationItems │ │ │ ├── NavigationItem │ │ │ │ ├── NavigationItem.jsx │ │ │ │ └── NavigationItem.module.css │ │ │ ├── NavigationItems.jsx │ │ │ └── NavigationItems.module.css │ │ ├── SideDrawer │ │ │ ├── DrawerToggle │ │ │ │ ├── DrawerToggle.jsx │ │ │ │ └── DrawerToggle.module.css │ │ │ ├── SideDrawer.jsx │ │ │ └── SideDrawer.module.css │ │ └── Toolbar │ │ │ ├── Toolbar.jsx │ │ │ └── Toolbar.module.css │ ├── Order │ │ ├── CheckoutSummary │ │ │ ├── CheckoutSummary.jsx │ │ │ └── CheckoutSummary.module.css │ │ ├── Order.jsx │ │ └── Order.module.css │ └── UI │ │ ├── Backdrop │ │ ├── Backdrop.jsx │ │ └── Backdrop.module.css │ │ ├── Button │ │ ├── Button.jsx │ │ └── Button.module.css │ │ ├── Input │ │ ├── Input.jsx │ │ └── Input.module.css │ │ ├── Modal │ │ ├── Modal.jsx │ │ └── Modal.module.css │ │ └── Spinner │ │ ├── Spinner.jsx │ │ └── Spinner.module.css ├── containers │ ├── BurgerBuilder │ │ └── BurgerBuilder.jsx │ ├── Checkout │ │ ├── Checkout.jsx │ │ └── ContactData │ │ │ ├── ContactData.jsx │ │ │ └── ContactData.module.css │ └── Orders │ │ ├── Orders.jsx │ │ └── Orders.module.css ├── hoc │ ├── Auxiliary │ │ └── Auxiliary.js │ ├── Layout │ │ ├── Layout.jsx │ │ └── Layout.module.css │ └── withErrorHandler │ │ └── withErrorHandler.jsx ├── index.css ├── index.js ├── reportWebVitals.js ├── setupTests.js └── store │ ├── actions │ ├── actionTypes.js │ ├── burgerBuilder.js │ ├── index.js │ └── order.js │ ├── reducers │ ├── burgerBuilder.js │ └── order.js │ └── utility.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "burger-builder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "axios": "^0.21.1", 10 | "prop-types": "^15.7.2", 11 | "react": "^17.0.1", 12 | "react-dom": "^17.0.1", 13 | "react-redux": "^7.2.4", 14 | "react-router-dom": "^5.2.0", 15 | "react-scripts": "4.0.2", 16 | "redux": "^4.1.0", 17 | "redux-thunk": "^2.3.0", 18 | "web-vitals": "^1.0.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pooridev/burger-builder/c25f1f6e5b5ff11edd10d54ac472e72c9b95eba5/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | Burger Builder 18 | 19 | 20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Layout from './hoc/Layout/Layout'; 3 | import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder'; 4 | import Checkout from './containers/Checkout/Checkout'; 5 | import { Route, Switch } from 'react-router'; 6 | import Orders from './containers/Orders/Orders'; 7 | 8 | class App extends Component { 9 | render() { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | ); 21 | } 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /src/assets/images/burger-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pooridev/burger-builder/c25f1f6e5b5ff11edd10d54ac472e72c9b95eba5/src/assets/images/burger-logo.png -------------------------------------------------------------------------------- /src/axios-orders.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const instance = axios.create({ 4 | baseURL: 'https://burger-builder-ff829-default-rtdb.firebaseio.com/' 5 | }); 6 | 7 | export default instance; 8 | -------------------------------------------------------------------------------- /src/components/Burger/BuildControls/BuildControl/BuildControl.jsx: -------------------------------------------------------------------------------- 1 | import classes from './BuildControl.module.css'; 2 | import PropTypes from 'prop-types'; 3 | const buildControl = props => ( 4 |
5 |
{props.label}
6 | 12 | 15 |
16 | ); 17 | 18 | buildControl.propTypes = { 19 | label: PropTypes.string, 20 | added: PropTypes.func, 21 | disabled: PropTypes.bool, 22 | removed: PropTypes.func 23 | } 24 | 25 | export default buildControl; 26 | -------------------------------------------------------------------------------- /src/components/Burger/BuildControls/BuildControl/BuildControl.module.css: -------------------------------------------------------------------------------- 1 | .BuildControl { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | margin: 5px 0; 6 | } 7 | 8 | .BuildControl button { 9 | display: block; 10 | font: inherit; 11 | padding: 5px; 12 | margin: 0 5px; 13 | width: 80px; 14 | border: 1px solid #aa6817; 15 | cursor: pointer; 16 | outline: none; 17 | } 18 | 19 | .BuildControl button:disabled { 20 | background-color: #ac9980; 21 | border: 1px solid #7e7365; 22 | color: #ccc; 23 | cursor: default; 24 | } 25 | 26 | .BuildControl button:hover:disabled { 27 | background-color: #ac9980; 28 | color: #ccc; 29 | cursor: not-allowed; 30 | } 31 | 32 | .Label { 33 | padding: 10px; 34 | font-weight: bold; 35 | width: 80px; 36 | } 37 | 38 | .BuildControl .Less { 39 | background-color: #d39952; 40 | color: white; 41 | } 42 | 43 | .BuildControl .More { 44 | background-color: #8f5e1e; 45 | color: white; 46 | } 47 | 48 | .BuildControl .Less:hover, 49 | .BuildControl .Less:active { 50 | background-color: #daa972; 51 | color: white; 52 | } 53 | 54 | .BuildControl .More:hover, 55 | .BuildControl .More:active { 56 | background-color: #99703f; 57 | color: white; 58 | } 59 | -------------------------------------------------------------------------------- /src/components/Burger/BuildControls/BuildControls.jsx: -------------------------------------------------------------------------------- 1 | import BuildControl from './BuildControl/BuildControl'; 2 | import PropTypes from 'prop-types'; 3 | import classes from './BuildControls.module.css'; 4 | const controls = [ 5 | { label: 'Cheese', type: 'cheese' }, 6 | { label: 'Salad', type: 'salad' }, 7 | { label: 'Bacon', type: 'bacon' }, 8 | { label: 'Meat', type: 'meat' } 9 | ]; 10 | 11 | const buildControls = props => ( 12 |
13 |

14 | Current price: {props.totalPrice.toFixed(2)} 15 |

16 | {controls.map(control => ( 17 | props.addedIngredient(control.type)} 21 | removed={() => props.removedIngredient(control.type)} 22 | disabled={props.disabledInfo[control.type]} 23 | /> 24 | ))} 25 | 31 |
32 | ); 33 | buildControls.propTypes = { 34 | price: PropTypes.number, 35 | purchasable: PropTypes.bool, 36 | ordered: PropTypes.func, 37 | addedIngredient: PropTypes.func, 38 | removedIngredient: PropTypes.func, 39 | disabledInfo: PropTypes.object 40 | }; 41 | 42 | export default buildControls; 43 | -------------------------------------------------------------------------------- /src/components/Burger/BuildControls/BuildControls.module.css: -------------------------------------------------------------------------------- 1 | .BuildControls { 2 | width: 100%; 3 | background-color: #cf8f2e; 4 | display: flex; 5 | flex-flow: column; 6 | align-items: center; 7 | box-shadow: 0 2px 1px #ccc; 8 | margin: auto; 9 | padding: 10px 0; 10 | } 11 | 12 | .OrderButton { 13 | background-color: #dad735; 14 | outline: none; 15 | cursor: pointer; 16 | border: 1px solid #966909; 17 | color: #966909; 18 | font-family: inherit; 19 | font-size: 1.2em; 20 | padding: 15px 30px; 21 | box-shadow: 2px 2px 2px #966909; 22 | } 23 | 24 | .OrderButton:hover, 25 | .OrderButton:active { 26 | background-color: #a0db41; 27 | border: 1px solid #966909; 28 | color: #966909; 29 | } 30 | 31 | .OrderButton:disabled { 32 | background-color: #c7c6c6; 33 | cursor: not-allowed; 34 | border: 1px solid #ccc; 35 | color: #888888; 36 | } 37 | 38 | .OrderButton:not(:disabled) { 39 | animation: enable 0.3s linear; 40 | } 41 | 42 | @keyframes enable { 43 | 0% { 44 | transform: scale(1); 45 | } 46 | 60% { 47 | transform: scale(1.1); 48 | } 49 | 100% { 50 | transform: scale(1); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/components/Burger/Burger.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import BurgerIngredient from './BurgerIngredient/BurgerIngredient'; 3 | import PropTypes from 'prop-types'; 4 | import classes from './Burger.module.css'; 5 | 6 | const burger = props => { 7 | // props 8 | const { ingredients } = props; 9 | 10 | let transformedIngredients = Object.keys(ingredients) 11 | .map(igKey => { 12 | return [...Array(ingredients[igKey])].map((_, index) => { 13 | return ; 14 | }); 15 | }) 16 | .reduce((arr, el) => { 17 | return arr.concat(el); 18 | }, []); 19 | 20 | if (transformedIngredients.length === 0) { 21 | transformedIngredients =

Pls start adding ingredients !

; 22 | } 23 | return ( 24 |
25 | 26 | {transformedIngredients} 27 | 28 |
29 | ); 30 | }; 31 | 32 | burger.propTypes = { 33 | ingredients: PropTypes.object 34 | }; 35 | 36 | export default burger; 37 | -------------------------------------------------------------------------------- /src/components/Burger/Burger.module.css: -------------------------------------------------------------------------------- 1 | .Burger { 2 | width: 100%; 3 | margin: auto; 4 | height: 250px; 5 | text-align: center; 6 | overflow: auto; 7 | font-weight: bold; 8 | font-size: 1.2rem; 9 | } 10 | 11 | @media (min-width: 500px) and (min-height: 400px) { 12 | .Burger { 13 | width: 350px; 14 | height: 340px; 15 | } 16 | } 17 | 18 | @media (min-width: 500px) and (min-height: 401px) { 19 | .Burger { 20 | width: 470px; 21 | height: 519px; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/Burger/BurgerIngredient/BurgerIngredient.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classes from './BurgerIngredient.module.css'; 3 | 4 | import PropTypes from 'prop-types'; 5 | const BurgerIngredient = props => { 6 | let ingredient = null; 7 | 8 | 9 | switch (props.type) { 10 | case 'bread-bottom': 11 | ingredient =
; 12 | break; 13 | 14 | case 'bread-top': 15 | ingredient = ( 16 |
17 |
18 |
19 |
20 | ); 21 | break; 22 | case 'meat': 23 | ingredient =
; 24 | break; 25 | case 'cheese': 26 | ingredient =
; 27 | break; 28 | case 'bacon': 29 | ingredient =
; 30 | break; 31 | case 'salad': 32 | ingredient =
; 33 | break; 34 | default: 35 | ingredient = null; 36 | } 37 | return ingredient; 38 | }; 39 | 40 | BurgerIngredient.propTypes = { 41 | type: PropTypes.string.isRequired 42 | }; 43 | 44 | export default BurgerIngredient; 45 | -------------------------------------------------------------------------------- /src/components/Burger/BurgerIngredient/BurgerIngredient.module.css: -------------------------------------------------------------------------------- 1 | .BreadBottom { 2 | height: 13%; 3 | width: 80%; 4 | background: linear-gradient(#f08e4a, #e27b36); 5 | border-radius: 0 0 30px 30px; 6 | box-shadow: inset -15px 0 #c15711; 7 | margin: 2% auto; 8 | } 9 | 10 | .BreadTop { 11 | height: 20%; 12 | width: 80%; 13 | background: linear-gradient(#bc581e, #e27b36); 14 | border-radius: 50% 50% 0 0; 15 | box-shadow: inset -15px 0 #c15711; 16 | margin: 2% auto; 17 | position: relative; 18 | } 19 | 20 | .Seeds1 { 21 | width: 10%; 22 | height: 15%; 23 | position: absolute; 24 | background-color: white; 25 | left: 30%; 26 | top: 50%; 27 | border-radius: 40%; 28 | transform: rotate(-20deg); 29 | box-shadow: inset -2px -3px #c9c9c9; 30 | } 31 | 32 | .Seeds1:after { 33 | content: ''; 34 | width: 100%; 35 | height: 100%; 36 | position: absolute; 37 | background-color: white; 38 | left: -170%; 39 | top: -260%; 40 | border-radius: 40%; 41 | transform: rotate(60deg); 42 | box-shadow: inset -1px 2px #c9c9c9; 43 | } 44 | 45 | .Seeds1:before { 46 | content: ''; 47 | width: 100%; 48 | height: 100%; 49 | position: absolute; 50 | background-color: white; 51 | left: 180%; 52 | top: -50%; 53 | border-radius: 40%; 54 | transform: rotate(60deg); 55 | box-shadow: inset -1px -3px #c9c9c9; 56 | } 57 | 58 | .Seeds2 { 59 | width: 10%; 60 | height: 15%; 61 | position: absolute; 62 | background-color: white; 63 | left: 64%; 64 | top: 50%; 65 | border-radius: 40%; 66 | transform: rotate(10deg); 67 | box-shadow: inset -3px 0 #c9c9c9; 68 | } 69 | 70 | .Seeds2:before { 71 | content: ''; 72 | width: 100%; 73 | height: 100%; 74 | position: absolute; 75 | background-color: white; 76 | left: 150%; 77 | top: -130%; 78 | border-radius: 40%; 79 | transform: rotate(90deg); 80 | box-shadow: inset 1px 3px #c9c9c9; 81 | } 82 | 83 | .Meat { 84 | width: 80%; 85 | height: 8%; 86 | background: linear-gradient(#7f3608, #702e05); 87 | margin: 2% auto; 88 | border-radius: 15px; 89 | } 90 | 91 | .Cheese { 92 | width: 90%; 93 | height: 4.5%; 94 | margin: 2% auto; 95 | background: linear-gradient(#f4d004, #d6bb22); 96 | border-radius: 20px; 97 | } 98 | 99 | .Salad { 100 | width: 85%; 101 | height: 7%; 102 | margin: 2% auto; 103 | background: linear-gradient(#228c1d, #91ce50); 104 | border-radius: 20px; 105 | } 106 | 107 | .Bacon { 108 | width: 80%; 109 | height: 3%; 110 | background: linear-gradient(#bf3813, #c45e38); 111 | margin: 2% auto; 112 | } 113 | -------------------------------------------------------------------------------- /src/components/Burger/OrderSummary/OrderSummary.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Aux from '../../../hoc/Auxiliary/Auxiliary'; 3 | import PropTypes from 'prop-types'; 4 | import Button from '../../UI/Button/Button'; 5 | 6 | class OrderSummary extends Component { 7 | render() { 8 | const ingredientSummary = Object.keys(this.props.ingredients).map(igKey => { 9 | return ( 10 |
  • 11 | {igKey} :{' '} 12 | {this.props.ingredients[igKey]} 13 |
    • 14 | ); 15 | }); 16 | return ( 17 | 18 |

    Your Order

    19 |

    A delicious burger with following ingredients:

    20 | 21 |

    22 | Total Price: {this.props.price.toFixed(2)} 23 |

    24 |

    Continue to checkout ?

    25 | 28 | 31 |     32 | ); 33 | } 34 | } 35 | 36 | OrderSummary.propTypes = { 37 | ingredients: PropTypes.object, 38 | purchaseContinued: PropTypes.func, 39 | purchaseCanceled: PropTypes.func, 40 | price: PropTypes.number 41 | }; 42 | 43 | export default OrderSummary; 44 | -------------------------------------------------------------------------------- /src/components/Logo/Logo.jsx: -------------------------------------------------------------------------------- 1 | import classes from './Logo.module.css'; 2 | import burgerLogo from '../../assets/images/burger-logo.png'; 3 | 4 | const logo = props => ( 5 |
    6 | burger logo 7 |
    8 | ); 9 | 10 | export default logo; 11 | -------------------------------------------------------------------------------- /src/components/Logo/Logo.module.css: -------------------------------------------------------------------------------- 1 | .Logo { 2 | height: 100%; 3 | padding: 8px; 4 | border-radius: 5px; 5 | pointer-events: none; 6 | background: #ffffff; 7 | box-sizing: border-box; 8 | } 9 | 10 | .Logo img { 11 | height: 100%; 12 | } -------------------------------------------------------------------------------- /src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.jsx: -------------------------------------------------------------------------------- 1 | import classes from './NavigationItem.module.css'; 2 | import PropTypes from 'prop-types'; 3 | import { NavLink } from 'react-router-dom'; 4 | 5 | const navigationItem = props => ( 6 |
  • 7 | 8 | {props.children} 9 | 10 |
    • 11 | ); 12 | 13 | navigationItem.propTypes = { 14 | link: PropTypes.string, 15 | active: PropTypes.bool 16 | }; 17 | 18 | export default navigationItem; 19 | -------------------------------------------------------------------------------- /src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.module.css: -------------------------------------------------------------------------------- 1 | .NavigationItem { 2 | margin: 10px 0; 3 | box-sizing: border-box; 4 | display: block; 5 | width: 100%; 6 | } 7 | 8 | .NavigationItem a { 9 | color: #8f5c2c; 10 | text-decoration: none; 11 | width: 100%; 12 | box-sizing: border-box; 13 | display: block; 14 | } 15 | 16 | .NavigationItem a:hover, 17 | .NavigationItem a:active, 18 | .NavigationItem a.Active { 19 | color: #40a4c8; 20 | } 21 | 22 | @media (min-width: 500px) { 23 | .NavigationItem { 24 | margin: 0; 25 | display: flex; 26 | height: 100%; 27 | width: auto; 28 | align-items: center; 29 | } 30 | 31 | .NavigationItem a { 32 | color: white; 33 | height: 100%; 34 | padding: 16px 10px; 35 | border-bottom: 4px solid transparent; 36 | } 37 | 38 | .NavigationItem a:hover, 39 | .NavigationItem a:active, 40 | .NavigationItem a.Active { 41 | background-color: #8f5c2c; 42 | border-bottom: 4px solid #40a4c8; 43 | color: white; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/components/Navigation/NavigationItems/NavigationItems.jsx: -------------------------------------------------------------------------------- 1 | import classes from './NavigationItems.module.css'; 2 | import NavigationItem from './NavigationItem/NavigationItem'; 3 | 4 | const navigationItems = props => ( 5 | 11 | ); 12 | export default navigationItems; -------------------------------------------------------------------------------- /src/components/Navigation/NavigationItems/NavigationItems.module.css: -------------------------------------------------------------------------------- 1 | .NavigationItems { 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | display: flex; 6 | flex-flow: column; 7 | align-items: center; 8 | height: 100%; 9 | } 10 | 11 | @media (min-width: 500px) { 12 | .NavigationItems { 13 | flex-flow: row; 14 | } 15 | } -------------------------------------------------------------------------------- /src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.jsx: -------------------------------------------------------------------------------- 1 | import classes from './DrawerToggle.module.css'; 2 | import PropTypes from 'prop-types'; 3 | const drawerToggle = props => ( 4 |
    5 |
    6 |
    7 |
    8 |
    9 | ); 10 | 11 | drawerToggle.propTypes = { 12 | clicked: PropTypes.func 13 | }; 14 | 15 | export default drawerToggle; 16 | -------------------------------------------------------------------------------- /src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.module.css: -------------------------------------------------------------------------------- 1 | .DrawerToggle { 2 | width: 40px; 3 | height: 100%; 4 | display: flex; 5 | flex-flow: column; 6 | justify-content: space-around; 7 | align-items: center; 8 | padding: 10px 0; 9 | box-sizing: border-box; 10 | cursor: pointer; 11 | } 12 | 13 | .DrawerToggle div { 14 | width: 90%; 15 | height: 3px; 16 | background-color: white; 17 | } 18 | 19 | @media (min-width: 500px) { 20 | .DrawerToggle { 21 | display: none; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/Navigation/SideDrawer/SideDrawer.jsx: -------------------------------------------------------------------------------- 1 | import NavigationItems from '../NavigationItems/NavigationItems'; 2 | import Logo from '../../Logo/Logo'; 3 | import PropTypes from 'prop-types'; 4 | import classes from './SideDrawer.module.css'; 5 | import Backdrop from '../../UI/Backdrop/Backdrop'; 6 | import Aux from '../../../hoc/Auxiliary/Auxiliary'; 7 | 8 | const SideDrawer = props => { 9 | let attachedClassed = [classes.SideDrawer, classes.Close]; 10 | if (props.open) { 11 | attachedClassed = [classes.SideDrawer, classes.Open]; 12 | } 13 | return ( 14 | 15 | 16 |
    17 |
    18 | 19 |
    20 | 23 |
    24 |     25 | ); 26 | }; 27 | 28 | SideDrawer.propTypes = { 29 | open: PropTypes.bool, 30 | closed: PropTypes.func 31 | }; 32 | 33 | export default SideDrawer; 34 | -------------------------------------------------------------------------------- /src/components/Navigation/SideDrawer/SideDrawer.module.css: -------------------------------------------------------------------------------- 1 | .SideDrawer { 2 | height: 100%; 3 | width: 280px; 4 | max-width: 70%; 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | z-index: 200; 9 | background: #fff; 10 | padding: 32px 16px; 11 | box-sizing: border-box; 12 | transition: transform 0.3s ease-out; 13 | } 14 | @media (min-width: 500px) { 15 | .SideDrawer { 16 | display: none; 17 | } 18 | } 19 | .Open { 20 | transform: translateX(0); 21 | } 22 | .Close { 23 | transform: translateX(-100%); 24 | } 25 | .Logo { 26 | height: 11%; 27 | } -------------------------------------------------------------------------------- /src/components/Navigation/Toolbar/Toolbar.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import Logo from '../../Logo/Logo'; 3 | import NavigationItems from '../NavigationItems/NavigationItems'; 4 | import DrawerToggle from '../SideDrawer/DrawerToggle/DrawerToggle'; 5 | import classes from './Toolbar.module.css'; 6 | 7 | const toolbar = props => ( 8 |
    9 | 10 | {/*
    MENU
    */} 11 |
    12 | 13 |
    14 | 17 |
    18 | ); 19 | 20 | toolbar.propTypes = { 21 | drawerToggleClicked: PropTypes.func 22 | }; 23 | 24 | export default toolbar; 25 | -------------------------------------------------------------------------------- /src/components/Navigation/Toolbar/Toolbar.module.css: -------------------------------------------------------------------------------- 1 | .Toolbar { 2 | top: 0; 3 | left: 0; 4 | z-index: 90; 5 | width: 100%; 6 | height: 56px; 7 | display: flex; 8 | position: fixed; 9 | padding: 0 20px; 10 | background: #703b09; 11 | align-items: center; 12 | box-sizing: border-box; 13 | justify-content: space-between; 14 | } 15 | 16 | .Toolbar nav { 17 | height: 100%; 18 | } 19 | .Logo { 20 | height: 80%; 21 | } 22 | @media (max-width: 499px) { 23 | .DesktopOnly { 24 | display: none; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/Order/CheckoutSummary/CheckoutSummary.jsx: -------------------------------------------------------------------------------- 1 | import classes from './CheckoutSummary.module.css'; 2 | import Burger from '../../Burger/Burger'; 3 | import Button from '../../UI/Button/Button'; 4 | 5 | const checkoutSummary = props => { 6 | return ( 7 |
    8 |

    We hope it tastes well

    9 |
    10 | 11 |
    12 | 15 | 18 |
    19 | ); 20 | }; 21 | 22 | export default checkoutSummary; 23 | -------------------------------------------------------------------------------- /src/components/Order/CheckoutSummary/CheckoutSummary.module.css: -------------------------------------------------------------------------------- 1 | .CheckoutSummary { 2 | text-align: center; 3 | margin: auto; 4 | } -------------------------------------------------------------------------------- /src/components/Order/Order.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import classes from './Order.module.css'; 4 | 5 | const Order = props => { 6 | const ingredients = []; 7 | 8 | for (let ingredientName in props.ingredients) { 9 | ingredients.push({ 10 | name: ingredientName, 11 | amount: props.ingredients[ingredientName] 12 | }); 13 | } 14 | 15 | const ingredientOutput = ingredients.map(ig => { 16 | return ( 17 | 26 | {ig.name} ({ig.amount}) 27 | 28 | ); 29 | }); 30 | 31 | return ( 32 |
    33 |

    Ingredients: {ingredientOutput}

    34 |

    35 | Price: USD {Number.parseFloat(props.price).toFixed(2)} 36 |

    37 |
    38 | ); 39 | }; 40 | 41 | export default Order; 42 | -------------------------------------------------------------------------------- /src/components/Order/Order.module.css: -------------------------------------------------------------------------------- 1 | .Order { 2 | width: 80%; 3 | border: 1px solid #eee; 4 | box-shadow: 0 2px 3px #ccc; 5 | margin: 10px auto; 6 | padding: 10px; 7 | box-sizing: border-box; 8 | } -------------------------------------------------------------------------------- /src/components/UI/Backdrop/Backdrop.jsx: -------------------------------------------------------------------------------- 1 | import classes from './Backdrop.module.css'; 2 | import PropTypes from 'prop-types'; 3 | const backdrop = props => 4 | props.show ? ( 5 |
    6 | ) : null; 7 | 8 | backdrop.propTypes = { 9 | clicked: PropTypes.func 10 | }; 11 | export default backdrop; -------------------------------------------------------------------------------- /src/components/UI/Backdrop/Backdrop.module.css: -------------------------------------------------------------------------------- 1 | .Backdrop { 2 | top: 0; 3 | left: 0; 4 | width: 100%; 5 | height: 100%; 6 | z-index: 100; 7 | position: fixed; 8 | background-color: rgba(0, 0, 0, 0.5); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/UI/Button/Button.jsx: -------------------------------------------------------------------------------- 1 | import classes from './Button.module.css'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const button = ({ btnType, clicked, children, disabled }) => ( 5 | 11 | ); 12 | button.propTypes = { 13 | btnType: PropTypes.string, 14 | clicked: PropTypes.func 15 | }; 16 | export default button; 17 | -------------------------------------------------------------------------------- /src/components/UI/Button/Button.module.css: -------------------------------------------------------------------------------- 1 | .Button { 2 | background-color: transparent; 3 | border: none; 4 | color: white; 5 | outline: none; 6 | cursor: pointer; 7 | font: inherit; 8 | padding: 10px; 9 | margin: 10px; 10 | font-weight: bold; 11 | } 12 | 13 | .Button:first-of-type { 14 | margin-left: 0; 15 | padding-left: 0; 16 | } 17 | 18 | .Button:disabled { 19 | color: #ccc; 20 | cursor: not-allowed; 21 | } 22 | 23 | .Success { 24 | color: #5c9210; 25 | } 26 | 27 | .Danger { 28 | color: #944317; 29 | } 30 | -------------------------------------------------------------------------------- /src/components/UI/Input/Input.jsx: -------------------------------------------------------------------------------- 1 | import classes from './Input.module.css'; 2 | 3 | const Input = props => { 4 | const { 5 | label, 6 | elementType, 7 | elementConfig, 8 | value, 9 | changed, 10 | inValid, 11 | shouldValidate, 12 | touched 13 | } = props; 14 | let inputElement = null; 15 | const inputClasses = [classes.InputElement]; 16 | 17 | if (inValid && shouldValidate && touched) { 18 | inputClasses.push(classes.InValid); 19 | } 20 | 21 | switch (elementType) { 22 | case 'input': 23 | inputElement = ( 24 | 30 | ); 31 | break; 32 | case 'textarea': 33 | inputElement = ( 34 |