mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2024-12-25 14:10:42 -05:00
feat: new stuff
This commit is contained in:
parent
87cfe81d2b
commit
9c6bed1983
5 changed files with 108 additions and 37 deletions
|
@ -22,8 +22,9 @@ function Bag({ cartKeys, cart, setCart }) {
|
|||
return (
|
||||
<>
|
||||
{cartKeys.length > 0 ? (
|
||||
<div>
|
||||
<h2>Cart</h2>
|
||||
<div className={styles.fullwidth}>
|
||||
<h2 className={styles.header}>Cart</h2>
|
||||
<div className={styles.cartItems}>
|
||||
{cartKeys.map((key, index) => (
|
||||
<CartItem
|
||||
item={cart[key]}
|
||||
|
@ -33,6 +34,7 @@ function Bag({ cartKeys, cart, setCart }) {
|
|||
/>
|
||||
))}
|
||||
</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 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>
|
||||
<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 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)}>
|
||||
Delete
|
||||
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;
|
||||
|
|
|
@ -15,7 +15,7 @@ export default function Navbar({ cartItems }) {
|
|||
<h1>{sumCartItems}</h1>
|
||||
</Link>
|
||||
) : (
|
||||
<button>I'm Ready</button>
|
||||
<img src="/shopping_cart_icon.svg" />
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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, ",");
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue