feat: new stuff

This commit is contained in:
Mike 2024-11-18 21:51:46 -05:00
parent 87cfe81d2b
commit 9c6bed1983
5 changed files with 108 additions and 37 deletions

View file

@ -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;

View file

@ -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>
);

View file

@ -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;
}

View file

@ -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;

View file

@ -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, ",");
}