add order now

src/components/BuildControls/BuildControls.tsx

@@ -8,9 +8,10 @@ interface Props {
     ingredients: Ingredients
     lessHandler: (ingKey: IngredientNames) => void
     moreHandler: (ingKey: IngredientNames) => void
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-const BuildControls = ({ingredients, purchasable, price, lessHandler, moreHandler}: Props) => {
+const BuildControls = ({ingredients, purchasable, price, setOpen, lessHandler, moreHandler}: Props) => {
     const ingKeys = Object.keys(ingredients)
 
     return (
@@ -29,7 +30,13 @@ const BuildControls = ({ingredients, purchasable, price, lessHandler, moreHandle
                 ))
             }
 
-            <button className="OrderButton" disabled={!purchasable}>ORDER NOW</button>
+            <button 
+                className="OrderButton" 
+                disabled={!purchasable}
+                onClick={() => setOpen(true)}
+            >
+                ORDER NOW
+            </button>
         </div>
     );
 }

src/components/Burger/OrderSummary/OrderSummary.tsx

+import { IngredientNames, Ingredients } from '@/interfaces/Ingredients';
+
+interface Props {
+    ingredients: Ingredients;
+    price: number; 
+}
+
+const OrderSummary = ({price, ingredients}: Props) => {
+    const ingredientSummary = Object.keys(ingredients)
+                                    .map((ingKey) => {
+                                        return (
+                                           <li key={ingKey}>
+                                                <span style={{textTransform: 'capitalize'}}>
+                                                    {ingKey}
+                                                </span>: {ingredients[ingKey as IngredientNames]}
+                                            </li> 
+                                        )
+                                    })
+
+    return (
+        <>
+           <h3>Your order</h3>
+           <p>A delicious burger with the following ingredients:</p>
+           <ul>
+               {ingredientSummary}
+           </ul>
+           <p><strong>Total Price: {price} ₸</strong></p>
+           <p>Continue to checkout?</p>
+       </>
+    )
+}
+
+export default OrderSummary
\ No newline at end of file

src/components/UI/Backdrop/Backdrop.css

+.Backdrop {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
\ No newline at end of file

src/components/UI/Backdrop/Backdrop.tsx

+import './Backdrop.css'
+
+interface Props {
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const Backdrop = ({setOpen}: Props) => {
+  return (
+    <div className='Backdrop' onClick={() => setOpen(false)}></div>
+  )
+}
+
+export default Backdrop
\ No newline at end of file

src/components/UI/Modal/Modal.css

+.Modal {
+    position: fixed;
+    z-index: 500;
+    background-color: white;
+    width: 70%;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px black;
+    padding: 16px;
+    left: 15%;
+    top: 30%;
+    box-sizing: border-box;
+    transition: all 0.3s ease-out;
+    color: black;
+}
+
+@media (min-width: 600px) {
+    .Modal {
+        width: 500px;
+        left: calc(50% - 250px);
+    }
+}
\ No newline at end of file

src/components/UI/Modal/Modal.tsx

+import { ReactNode } from "react"
+import './Modal.css'
+import Backdrop from "../Backdrop/Backdrop"
+
+type TProps = {
+    children: ReactNode
+    open: boolean
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const Modal = ({open, setOpen, children}: TProps) => {
+  return open ? (
+    <>
+        <Backdrop setOpen={setOpen}/>
+        <div className="Modal">
+            {children}
+        </div>
+    </>
+  ) : null
+}
+
+export default Modal
\ No newline at end of file

src/containers/BurgerBuilder/BurgerBuilder.tsx

 import BuildControls from '@/components/BuildControls/BuildControls';
 import Burger from '@/components/Burger/Burger';
+import OrderSummary from '@/components/Burger/OrderSummary/OrderSummary';
+import Modal from '@/components/UI/Modal/Modal';
 import { IngredientNames, IngredientPrices, Ingredients } from '@/interfaces/Ingredients';
 import { useState } from 'react';
 
 const BurgerBuilder = () => {
     const [totalPrice, setTotalPrice] = useState<number>(IngredientPrices.bread);
     const [purchasable, setPurchasable] = useState<boolean>(false);
+    const [open, setOpen] = useState<boolean>(false);
     const [ingredients, setIngredients] = useState<Ingredients>({
         salad: 0,
         cheese: 0,
@@ -55,11 +58,19 @@ const BurgerBuilder = () => {
 
     return (
         <>
+            <Modal open={open} setOpen={setOpen}>
+                <OrderSummary 
+                    price={totalPrice} 
+                    ingredients={ingredients}
+                />
+            </Modal>
+
             <Burger ingredients={ingredients}/>
             <BuildControls 
                 ingredients={ingredients} 
                 lessHandler={lessHandler}
                 moreHandler={moreHandler}
+                setOpen={setOpen}
                 price={totalPrice}
                 purchasable={purchasable}
             />