feat: new stuff

shopping-cart/src/Cart.jsx

@@ -22,16 +22,18 @@ function Bag({ cartKeys, cart, setCart }) {
   return (
     <>
       {cartKeys.length > 0 ? (
-        <div>
-          <h2>Cart</h2>
-          {cartKeys.map((key, index) => (
-            <CartItem
-              item={cart[key]}
-              cart={cart}
-              setCart={setCart}
-              key={index}
-            />
-          ))}
+        <div className={styles.fullwidth}>
+          <h2 className={styles.header}>Cart</h2>
+          <div className={styles.cartItems}>
+            {cartKeys.map((key, index) => (
+              <CartItem
+                item={cart[key]}
+                cart={cart}
+                setCart={setCart}
+                key={index}
+              />
+            ))}
+          </div>
         </div>
       ) : (
         <h2>Your cart is empty</h2>
@@ -68,32 +70,40 @@ function CartItem({ item, cart, setCart }) {
   const { title, price, image, qty } = item;
 
   return (
-    <div className={styles.container}>
-      <img src={image} alt={title} />
-      <div>
-        <h3>{title}</h3>
-        <p>Price: ${currencyFormat(price)} x </p>
-        <p>Qty: {qty} </p>
-      </div>
-      <div>
-        <button onClick={() => decreaseQty(item, cart, setCart)}>
-          Decrease
-        </button>
-        <p>{qty}</p>
-        <button onClick={() => increaseQty(item, cart, setCart)}>
-          Increase
-        </button>
-      </div>
-      <div>
-        <p>total: ${currencyFormat(qty * price)} </p>
-        <button onClick={() => removeFromCart(item, cart, setCart)}>
-          Delete
-        </button>
+    <div className={styles.cartItem}>
+      <img className={styles.img} src={image} alt={title} />
+      <div className={styles.card}>
+        <div>
+          <h3>{title}</h3>
+          <p>Price: ${currencyFormat(price)} x </p>
+        </div>
+        <div className={styles.qtybtn}>
+          <button onClick={() => decreaseQty(item, cart, setCart)}>-</button>
+          <QuantityInput item={item} cart={cart} setCart={setCart} />
+          <button onClick={() => increaseQty(item, cart, setCart)}>+</button>
+        </div>
+        <div>
+          <p>total: ${currencyFormat(qty * price)} </p>
+          <button onClick={() => removeFromCart(item, cart, setCart)}>
+            Remove From Cart
+          </button>
+        </div>
       </div>
     </div>
   );
 }
 
+function QuantityInput({ item, cart, setCart }) {
+  function handleChange(e) {
+    const newQty = e.target.value;
+    let obj = { ...cart };
+    obj[item.id].qty = newQty;
+    setCart(obj);
+  }
+
+  return <input value={item.qty} onChange={handleChange} />;
+}
+
 function increaseQty(item, cart, setCart) {
   if (cart[item.id]) {
     let obj = { ...cart };
@@ -134,4 +144,10 @@ OrderSummary.propTypes = {
   cart: PropTypes.object,
 };
 
+QuantityInput.propTypes = {
+  item: PropTypes.object,
+  cart: PropTypes.object,
+  setCart: PropTypes.func,
+};
+
 export default Cart;

shopping-cart/src/components/navbar.jsx

@@ -15,7 +15,7 @@ export default function Navbar({ cartItems }) {
           <h1>{sumCartItems}</h1>
         </Link>
       ) : (
-        <button>I&apos;m Ready</button>
+        <img src="/shopping_cart_icon.svg" />
       )}
     </nav>
   );

shopping-cart/src/css/cart.module.css

@@ -4,5 +4,57 @@
 }
 
 .summary {
-  margin-right: 1.5rem;
+  margin-right: 3rem;
+  padding: 1rem;
+  display: inline-block;
+  min-width: 250px;
+}
+
+.fullwidth {
+  width: 100%;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  margin: 0 2rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.cartItems {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  align-items: space-between;
+  justify-content: space-between;
+  align-content: flex-start;
+}
+
+.cartItem {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  background-color: gray;
+}
+
+.qtybtn {
+  display: flex;
+}
+
+.qtyp {
+  font-size: 1.3rem;
+  padding: 0.5rem;
+  margin: 0.5rem;
+}
+
+.img {
+  width: 100%;
+  max-height: 300px;
+  vertical-align: middle;
+  object-fit: contain;
+  float: left;
+}
+
+.header {
+  margin: 1rem;
 }

shopping-cart/src/css/index.css

@@ -1,10 +1,10 @@
 :root {
-  font-family: "Roboto Condensed", Inter, system-ui, sans-serif;
+  font-family: Inter, system-ui, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+  /*color-scheme: light dark;*/
+  /*color: rgba(255, 255, 255, 0.87);*/
   /*background-color: #242424;*/
 
   font-synthesis: none;

shopping-cart/src/utils/currency.js

@@ -1,3 +1,6 @@
 export function currencyFormat(str) {
-  return (str / 100).toFixed(2);
+  return (str / 100)
+    .toFixed(2)
+    .toString()
+    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }