mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2024-12-25 14:10:42 -05:00
reorg tree and add summary
This commit is contained in:
parent
6babd2bee0
commit
87cfe81d2b
9 changed files with 62 additions and 13 deletions
|
|
@ -3,6 +3,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Smig.Tech Coaching</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useState } from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import "./App.css";
|
||||
import "./css/App.css";
|
||||
import Navbar from "./components/navbar";
|
||||
|
||||
function App() {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,10 @@ const Cart = () => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h2>Cart</h2>
|
||||
<Bag cartKeys={cartKeys} cart={cart} setCart={setCart} />
|
||||
<div className={styles.container}>
|
||||
<Bag cartKeys={cartKeys} cart={cart} setCart={setCart} />
|
||||
<OrderSummary cart={cart} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -21,6 +23,7 @@ function Bag({ cartKeys, cart, setCart }) {
|
|||
<>
|
||||
{cartKeys.length > 0 ? (
|
||||
<div>
|
||||
<h2>Cart</h2>
|
||||
{cartKeys.map((key, index) => (
|
||||
<CartItem
|
||||
item={cart[key]}
|
||||
|
|
@ -37,6 +40,30 @@ function Bag({ cartKeys, cart, setCart }) {
|
|||
);
|
||||
}
|
||||
|
||||
function OrderSummary({ cart }) {
|
||||
const cartItems = Object.keys(cart);
|
||||
let numItems = 0;
|
||||
let subTotal = 0;
|
||||
|
||||
cartItems.forEach((item) => {
|
||||
subTotal += cart[item].price * cart[item].qty;
|
||||
numItems += cart[item].qty;
|
||||
});
|
||||
const shippingFee = subTotal * 0.1;
|
||||
const total = subTotal + shippingFee;
|
||||
|
||||
return (
|
||||
<div className={styles.summary}>
|
||||
<h2>Order Summary</h2>
|
||||
<p>
|
||||
Subtotal ({numItems} items): ${currencyFormat(subTotal)}
|
||||
</p>
|
||||
<p>Shipping (10%): ${currencyFormat(shippingFee)}</p>
|
||||
<p>Total: ${currencyFormat(total)}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CartItem({ item, cart, setCart }) {
|
||||
const { title, price, image, qty } = item;
|
||||
|
||||
|
|
@ -45,8 +72,8 @@ function CartItem({ item, cart, setCart }) {
|
|||
<img src={image} alt={title} />
|
||||
<div>
|
||||
<h3>{title}</h3>
|
||||
<p>Price: ${currencyFormat(price)}</p>
|
||||
<p>Qty: {qty}</p>
|
||||
<p>Price: ${currencyFormat(price)} x </p>
|
||||
<p>Qty: {qty} </p>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={() => decreaseQty(item, cart, setCart)}>
|
||||
|
|
@ -58,7 +85,7 @@ function CartItem({ item, cart, setCart }) {
|
|||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<p>Total: {currencyFormat(qty * price)}</p>
|
||||
<p>total: ${currencyFormat(qty * price)} </p>
|
||||
<button onClick={() => removeFromCart(item, cart, setCart)}>
|
||||
Delete
|
||||
</button>
|
||||
|
|
@ -103,4 +130,8 @@ Bag.propTypes = {
|
|||
setCart: PropTypes.func,
|
||||
};
|
||||
|
||||
OrderSummary.propTypes = {
|
||||
cart: PropTypes.object,
|
||||
};
|
||||
|
||||
export default Cart;
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: calc(100% / 5);
|
||||
max-width: 350px;
|
||||
justify-content: end;
|
||||
/*flex: 1;*/
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem;
|
||||
background: gray;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 300px;
|
||||
vertical-align: middle;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: "Roboto Condensed", Inter, system-ui, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
/*background-color: #242424;*/
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
|
@ -18,6 +18,13 @@ body {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.roboto-condensed-fnt {
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*h1 {*/
|
||||
/* font-size: 3.2em;*/
|
||||
/* line-height: 1.1;*/
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./index.css";
|
||||
import "./css/index.css";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import routes from "./routes";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue