added cart and store components

shopping-cart/src/components/main.jsx

@@ -3,14 +3,20 @@ import styles from "./main.module.css";
 export default function Main(props) {
   return (
     <main>
-      <div>
-        <h1 className={styles.mainHeading}>We help you skill up faster</h1>
-        <p>
-          Trying to pivot into tech? There&apos;s a lot to figure out. We can
-          help you navigate the path. Fast results and guaranteed growth.
-        </p>
-        <button>BOOK INTRO CALL</button>
-      </div>
+      <Default />
     </main>
   );
 }
+
+function Default() {
+  return (
+    <div>
+      <h1 className={styles.mainHeading}>We help you skill up faster</h1>
+      <p>
+        Trying to pivot into tech? There&apos;s a lot to figure out. We can help
+        you navigate the path. Fast results and guaranteed growth.
+      </p>
+      <button>BOOK INTRO CALL</button>
+    </div>
+  );
+}

shopping-cart/src/components/navbar.jsx

@@ -1,11 +1,13 @@
 import styles from "./navbar.module.css";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
 
-export default function Navbar(props) {
+export default function Navbar({ cartItems }) {
   return (
     <nav className={styles.nav}>
       <h1>Smig.Tech</h1>
       <Nav />
-      <button>I&apos;m Ready</button>
+      {cartItems ? <h1>{cartItems}</h1> : <button>I&apos;m Ready</button>}
     </nav>
   );
 }
@@ -13,8 +15,16 @@ export default function Navbar(props) {
 function Nav() {
   return (
     <ul className={styles.nav}>
-      <li>home</li>
-      <li>shop</li>
+      <li>
+        <Link to="/">home</Link>
+      </li>
+      <li>
+        <Link to="store">shop</Link>
+      </li>
     </ul>
   );
 }
+
+Navbar.propTypes = {
+  cartItems: PropTypes.number,
+};

shopping-cart/src/components/productCollection.jsx

@@ -0,0 +1,19 @@
+import Product from "./products";
+import PropTypes from "prop-types";
+
+export default function ProductCollection({ loading, items }) {
+  return (
+    <div>
+      {!loading
+        ? items.map((item, index) => {
+            return <Product item={item} key={index} />;
+          })
+        : null}
+    </div>
+  );
+}
+
+ProductCollection.propTypes = {
+  loading: PropTypes.bool,
+  items: PropTypes.array,
+};

shopping-cart/src/components/products.jsx

@@ -0,0 +1,17 @@
+import PropTypes from "prop-types";
+
+import styles from "./products.module.css";
+
+export default function Product({ item }) {
+  return (
+    <div className={styles.card}>
+      <img src={item.image} alt={item.title} className={styles.img} />
+      <p>{item.title}</p>
+      <p>${item.price}</p>
+    </div>
+  );
+}
+
+Product.propTypes = {
+  item: PropTypes.object,
+};

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

@@ -0,0 +1,11 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  max-width: 350px;
+  justify-content: center;
+  align-items: center;
+}
+
+.img {
+  max-width: 250px;
+}