adding more logic and components

shopping-cart/src/components/navbar.jsx

@@ -6,7 +6,7 @@ export default function Navbar({ cartItems }) {
   const sumCartItems = Object.keys(cartItems).length;
 
   return (
-    <nav className={styles.nav}>
+    <nav className={styles.container}>
       <h1>Smig.Tech</h1>
       <Nav />
       {sumCartItems > 0 ? (

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

@@ -1,11 +1,17 @@
-nav {
+.container {
   display: flex;
   justify-content: space-between;
   padding: 0 1rem;
+  /*position: relative;*/
 }
 
 .nav {
   display: flex;
   list-style-type: none;
   gap: 20px;
+  /*position: absolute;*/
+  /*right: 4vw;*/
+  padding-right: 1rem;
+  margin-left: auto;
+  align-self: center;
 }

shopping-cart/src/components/productCollection.jsx

@@ -1,6 +1,6 @@
-import Product from "./products";
+import { Link } from "react-router-dom";
+import Products from "./products";
 import PropTypes from "prop-types";
-
 import styles from "./productCollection.module.css";
 
 export default function ProductCollection({ loading, items, cart, setCart }) {
@@ -9,7 +9,10 @@ export default function ProductCollection({ loading, items, cart, setCart }) {
       {!loading
         ? items.map((item, index) => {
             return (
-              <Product item={item} key={index} cart={cart} setCart={setCart} />
+              <div key={index} className={styles.card}>
+                <Products item={item} cart={cart} setCart={setCart} />
+                <Link to={item.id}> More Info</Link>
+              </div>
             );
           })
         : null}

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

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% / 4);
+  justify-content: end;
+  /*flex: 1;*/
+  padding: 1.5rem;
+  margin: 1.5rem;
+}

shopping-cart/src/components/productDetails.jsx

@@ -0,0 +1,47 @@
+import { useParams, useOutletContext } from "react-router-dom";
+import Products from "./products";
+import PropTypes from "prop-types";
+
+import styles from "./productCollection.module.css";
+
+export default function ProductDetails() {
+  const [cart, setCart, items, setItems] = useOutletContext();
+
+  const { id } = useParams();
+  const item = items.filter((item) => item.id === id)[0];
+
+  return (
+    <div className={styles.container}>
+      {item ? (
+        <div className={styles.card}>
+          <Products item={item} cart={cart} setCart={setCart} />
+          <button
+            onClick={() => {
+              addToCart(item, cart, setCart);
+            }}
+          >
+            Add to Cart
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function addToCart(item, cart, setCart) {
+  let obj = { ...cart };
+  if (obj[item.id]) {
+    obj[item.id].qty += 1;
+  } else {
+    obj[item.id] = item;
+    obj[item.id].qty = 1;
+  }
+
+  setCart(obj);
+}
+
+ProductDetails.propTypes = {
+  item: PropTypes.object,
+  cart: PropTypes.object,
+  setCart: PropTypes.func,
+};

shopping-cart/src/components/products.jsx

@@ -2,32 +2,17 @@ import PropTypes from "prop-types";
 
 import styles from "./products.module.css";
 
-export default function Product({ item, cart, setCart }) {
+export default function Products({ item, cart, setCart }) {
   return (
     <div className={styles.card}>
       <img src={item.image} alt={item.title} className={styles.img} />
       <p>{item.title}</p>
       <p>${item.price}</p>
-      <button
-        onClick={() => {
-          let obj = { ...cart };
-          if (obj[item.id]) {
-            obj[item.id].qty += 1;
-          } else {
-            obj[item.id] = item;
-            obj[item.id].qty = 1;
-          }
-
-          setCart(obj);
-        }}
-      >
-        Add to Cart
-      </button>
     </div>
   );
 }
 
-Product.propTypes = {
+Products.propTypes = {
   item: PropTypes.object,
   cart: PropTypes.object,
   setCart: PropTypes.func,

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

@@ -1,13 +1,3 @@
-.card {
-  display: flex;
-  flex-direction: column;
-  max-width: calc(100% / 5);
-  justify-content: end;
-  /*flex: 1;*/
-  padding: 1.5rem;
-  margin: 1.5rem;
-}
-
 .img {
   width: 100%;
   height: auto;