diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js
index c449a4d..d73bc85 100644
--- a/src/components/Cart/Cart.js
+++ b/src/components/Cart/Cart.js
@@ -1,11 +1,37 @@
+import { useContext } from "react";
import classes from "./Cart.module.css";
import Modal from "../UI/Modal";
+import CartContext from "../../store/cart-context";
+import CartItem from "./CartItem";
const Cart = (props) => {
+ const cartCtx = useContext(CartContext);
+
+ const totalAmount = `$${cartCtx.totalAmount.toFixed(2)}`;
+
+ const hasItems = cartCtx.items.length > 0;
+
+ const cartItemAddHandler = (item) => {
+ cartCtx.addItem(item);
+ };
+
+ const cartItemRemoveHandler = (id) => {
+ cartCtx.removeItem(id);
+ };
+
const cartItems = (
- {[{ id: "c1", name: "sushi", amount: 2, price: 12.99 }].map((item) => (
- - {item.name}
+ {cartCtx.items.map((item) => (
+
+ {item.name}
+
))}
);
@@ -15,13 +41,13 @@ const Cart = (props) => {
{cartItems}
Total Amount
- 35.63
+ {totalAmount}
-
+ {hasItems && }
);
diff --git a/src/components/Cart/CartItem.js b/src/components/Cart/CartItem.js
new file mode 100644
index 0000000..0c534fc
--- /dev/null
+++ b/src/components/Cart/CartItem.js
@@ -0,0 +1,23 @@
+import classes from './CartItem.module.css';
+
+const CartItem = (props) => {
+ const price = `$${props.price.toFixed(2)}`;
+
+ return (
+
+
+
{props.name}
+
+ {price}
+ x {props.amount}
+
+
+
+
+
+
+
+ );
+};
+
+export default CartItem;
\ No newline at end of file
diff --git a/src/components/Cart/CartItem.module.css b/src/components/Cart/CartItem.module.css
new file mode 100644
index 0000000..f93a02a
--- /dev/null
+++ b/src/components/Cart/CartItem.module.css
@@ -0,0 +1,65 @@
+.cart-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 2px solid #8a2b06;
+ padding: 1rem 0;
+ margin: 1rem 0;
+}
+
+.cart-item h2 {
+ margin: 0 0 0.5rem 0;
+ color: #363636;
+}
+
+.summary {
+ width: 10rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.price {
+ font-weight: bold;
+ color: #8a2b06;
+}
+
+.amount {
+ font-weight: bold;
+ border: 1px solid #ccc;
+ padding: 0.25rem 0.75rem;
+ border-radius: 6px;
+ color: #363636;
+}
+
+.actions {
+ display: flex;
+ flex-direction: column;
+}
+
+@media (min-width: 768px) {
+ .actions {
+ flex-direction: row;
+ }
+}
+
+.cart-item button {
+ font: inherit;
+ font-weight: bold;
+ font-size: 1.25rem;
+ color: #8a2b06;
+ border: 1px solid #8a2b06;
+ width: 3rem;
+ text-align: center;
+ border-radius: 6px;
+ background-color: transparent;
+ cursor: pointer;
+ margin-left: 1rem;
+ margin: 0.25rem;
+}
+
+.cart-item button:hover,
+.cart-item button:active {
+ background-color: #8a2b06;
+ color: white;
+}
\ No newline at end of file