From 3a2a44d828a5d56c5a9e4dad37411fbae3cf8f5f Mon Sep 17 00:00:00 2001
From: oscar <oscarzhou0727@icloud.com>
Date: Sat, 18 Mar 2023 12:32:13 +1300
Subject: [PATCH] add cart component with dummy data

---
 src/components/Cart/Cart.js         | 27 +++++++++++++++++
 src/components/Cart/Cart.module.css | 46 +++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 src/components/Cart/Cart.js
 create mode 100644 src/components/Cart/Cart.module.css

diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js
new file mode 100644
index 0000000..43414a4
--- /dev/null
+++ b/src/components/Cart/Cart.js
@@ -0,0 +1,27 @@
+import classes from "./Cart.module.css";
+
+const Cart = (props) => {
+  const cartItems = (
+    <ul className={classes["cart-items"]}>
+      {[{ id: "c1", name: "sushi", amount: 2, price: 12.99 }].map((item) => (
+        <li>{item.name}</li>
+      ))}
+    </ul>
+  );
+
+  return (
+    <div>
+      {cartItems}
+      <div className={classes.total}>
+        <span>Total Amount</span>
+        <span>35.63</span>
+      </div>
+      <div className={classes.actions}>
+        <button className={classes["button--alt"]}>Close</button>
+        <button className={classes.button}>Order</button>
+      </div>
+    </div>
+  );
+};
+
+export default Cart;
diff --git a/src/components/Cart/Cart.module.css b/src/components/Cart/Cart.module.css
new file mode 100644
index 0000000..cd8246d
--- /dev/null
+++ b/src/components/Cart/Cart.module.css
@@ -0,0 +1,46 @@
+.cart-items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 20rem;
+  overflow: auto;
+}
+
+.total {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: bold;
+  font-size: 1.5rem;
+  margin: 1rem 0;
+}
+
+.actions {
+  text-align: right;
+}
+
+.actions button {
+  font: inherit;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid #8a2b06;
+  padding: 0.5rem 2rem;
+  border-radius: 25px;
+  margin-left: 1rem;
+}
+
+.actions button:hover,
+.actions button:active {
+  background-color: #5a1a01;
+  border-color: #5a1a01;
+  color: white;
+}
+
+.actions .button--alt {
+  color: #8a2b06;
+}
+
+.actions .button {
+  background-color: #8a2b06;
+  color: white;
+}
\ No newline at end of file