updated cart component, header, and added OrderSummary

src/App.js

@@ -1,37 +1,40 @@
 import './App.css';
 
-import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import {Route, BrowserRouter as Router, Routes, BrowserRouter} from 'react-router-dom';
 
 import AdminRoutes from './components/Admin/AdminRoutes';
-import { CartProvider } from "./components/withCart";
+import {CartProvider} from "./components/withCart";
 import Header from "./components/Header/Header";
 import React from "react";
 import Restaurant from "./components/Restaurants/Restaurant";
 import Restaurants from "./components/Restaurants/Restaurants";
 import SignInRoute from "./routes/SignInRoute";
 import SignUpRoute from "./routes/SignUpRoute";
 import UserMenuRoute from "./routes/UserMenuRoute";
+import Checkout from "./components/Cart/OrderSummary";
+import OrderSummary from "./components/Cart/OrderSummary";
+import Cart from "./components/Cart/Cart";
 
 function App() {
-	const isAdmin = true; // Add Redux states here
+    const isAdmin = true; // Add Redux states here
 
-  return (
-		<CartProvider>
-			<Router>
-				<Header />
-				<Routes>
-					<Route path="/admin/*" element={<AdminRoutes isAdmin={isAdmin} />} />
-
-					<Route path="/" element={<Restaurants />} />
-					<Route path="/:id" element={<Restaurant />} />
-					<Route path="/login" element={<SignInRoute />} />
-					<Route path="/signup" element={<SignUpRoute />} />
-					<Route path="/user" element={<UserMenuRoute />} />
-					{/* Other routes */}
-				</Routes>
-			</Router>
-		</CartProvider>
-  );
+    return (
+        <CartProvider>
+            <Router>
+                <Header/>
+                <Routes>
+                    <Route path="/admin/*" element={<AdminRoutes isAdmin={isAdmin}/>}/>
+                    <Route path="/" element={<Restaurants/>}/>
+                    <Route path="/:id" element={<Restaurant/>}/>
+                    <Route path="/login" element={<SignInRoute/>}/>
+                    <Route path="/signup" element={<SignUpRoute/>}/>
+                    <Route path="/user" element={<UserMenuRoute/>}/>
+                    <Route path="/checkout" element={<OrderSummary/>}/>
+                    {/* Other routes */}
+                </Routes>
+            </Router>
+        </CartProvider>
+    );
 }
 
 export default App;

src/components/Cart/Cart.js

@@ -1,87 +1,42 @@
 import React, {useEffect, useState} from 'react';
+import {useCart} from "../withCart";
+import {Offcanvas, Stack} from "react-bootstrap";
+import CartItem from "./CartItem";
+import Button from "react-bootstrap/Button";
+import {Link, useNavigate} from "react-router-dom";
 
-const Cart = ({cartItems, setCartItems}) => {
- //   console.log('basket is', cartItems);
-    const [totalPrice, setTotalPrice] = useState(0)
-    const totalPrices = () => {
-        let total = 0;
-        cartItems.map(el =>
-            (total += el.price * el.count))
-        setTotalPrice(total)
-    }
 
-    useEffect(() => {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        totalPrices()
-    })
+const Cart = ({isOpen}) => {
 
-    const plusCount = (id) => {
-        setCartItems(cartItems.map(el => {
-            if (el.id === id) {
-                el.count++;
-            }
-            return el;
-        }))
-    }
-    const minusCount = (id, count) => {
-        if (count < 2) {
-            removeProduct(id);
-        } else {
-            setCartItems(
-                cartItems.map(el => {
-                    if (el.id === id) {
-                        el.count--;
-                    }
-                    return el
-                })
-            )
-        }
-    }
-    const removeProduct = (id) => {
-        setCartItems(cartItems.filter(el =>
-            el.id !== id))
-    }
-    return (
-        <div>
-            <h2>Shopping Cart</h2>
-            {cartItems.length > 0 &&
-                <table className="table">
-                    <thead style={{border: "2px solid yellow"}}>
-                    <tr>
-                        <th scope="col">Product</th>
-                        <th scope="col">Price</th>
-                        <th scope="col">Quantity</th>
-                        <th scope="col">Total Price</th>
-                        <th scope="col"></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {cartItems.map(el=>
-                        <tr key={el.id}>
-                            <th scope="row">{el.name}</th>
-                            <td>{el.price}</td>
-                            <td>
-                                <button onClick={() => minusCount(el.id, el.count)}>-</button>
-                                {el.count}
-                                <button onClick={() => plusCount(el.id)}>+</button>
+    const {closeCart, cartItems} = useCart();
 
-                            </td>
-                            <td>{el.price * el.count}</td>
-                            <td>
-                                <button onClick={() => removeProduct(el.id)}>X</button>
-                            </td>
-                        </tr>
+    return (
+        <Offcanvas show={isOpen} onHide={closeCart} placement="end">
+            <Offcanvas.Header closeButton>
+                <Offcanvas.Title>
+                    <h2>Shopping Cart</h2>
+                </Offcanvas.Title>
+            </Offcanvas.Header>
+            <Offcanvas.Body>
+                <Stack gap={3}>
+                    {cartItems.map((item, index) => (
+                        <CartItem key={index} item={item} id={index}/>
+                    ))}
+                    <div>
+                        <b>Total:</b>{' $'}{
+                        cartItems.reduce((total, cartItem) => {
+                            return total + (cartItem?.dish.price || 0) * cartItem.quantity
+                        }, 0)
+                    }
 
-                    )}
-                    <div className='total'>
-                        <h3>Total order $ {totalPrice}</h3>
                     </div>
-                    </tbody>
-                </table>
-            }
-            <h2>Delivery address</h2>
-            <h2>Payment details</h2>
-        </div>
+                    <div>
+                        <a href="/checkout"  className="btn btn-warning" role="button">Checkout</a>
+                    </div>
+
+                </Stack>
+            </Offcanvas.Body>
+        </Offcanvas>
     );
 
 };

src/components/Cart/CartItem.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {useCart} from "../withCart";
+import {Stack} from "react-bootstrap";
+import Button from "react-bootstrap/Button";
+import BinIcon from "./delete.svg";
+
+
+const CartItem = ({item, id}) => {
+    const{removeFromCart, increaseItemQuantity, decreaseItemQuantity} = useCart();
+
+    return (
+        <Stack direction="horizontal" gap={2} className="d-flex align-items-center">
+            <img src={item.dish.image} style={{width: "150px", height: "75px", objectFit: "cover"}}/>
+            <div className={"me-auto"}>
+                <div>{item.dish.name}{" "}
+                    {item.quantity > 1 &&(
+                        <span className="text-muted" style={{fontSize: ".5rem"}}>x{item.quantity}</span>
+
+                    )}</div>
+                <div className="text-muted" style={{fontSize: ".7rem"}}>${item.dish.price}</div>
+                <div>${item.dish.price * item.quantity}</div>
+                <Button onClick={()=>removeFromCart(id)} variant="outline-warning" size="xl">
+                    <img src={BinIcon} style={{width: "15px"}}/>
+                </Button>
+                <Button onClick={()=>decreaseItemQuantity(id)} variant="outline-warning" size="xl">
+                    -
+                </Button>
+                {item.quantity}
+                <Button onClick={()=>increaseItemQuantity(id)} variant="outline-warning" size="xl">
+                    +
+                </Button>
+            </div>
+        </Stack>
+    );
+};
+
+export default CartItem;