shop

src/components/navbar.js

+import React from "react";
+import { Link } from "react-router-dom";
+import { ShoppingCart } from "phosphor-react";
+import "./navbar.css";
+
+export const Navbar = () => {
+  return (
+    <div className="navbar">
+      <div className="links">
+        <Link to="/"> Shop </Link>
+        <Link to="/contact"> Contact </Link>
+        <Link to="/cart">
+          <ShoppingCart size={32} />
+        </Link>
+      </div>
+    </div>
+  );
+};

src/pages/cart/cart.js

+import React, { useContext } from "react";
+import { ShopContext } from "../../context/shop-context";
+import { PRODUCTS } from "../../products";
+import { CartItem } from "./cart-item";
+import { useNavigate } from "react-router-dom";
+
+import "./cart.css";
+export const Cart = () => {
+  const { cartItems, getTotalCartAmount, checkout } = useContext(ShopContext);
+  const navigate = useNavigate();
+
+  return (
+    <div className="cart">
+      <div>
+        <h1>Your Cart Items</h1>
+      </div>
+      <div className="cart">
+        {PRODUCTS.map((product) => {
+          if (cartItems[product.id] !== 0) {
+            return <CartItem data={product} />;
+          }
+        })}
+      </div>
+
+    </div>
+  );
+};

src/pages/contact.js

+import React from "react";
+
+export const Contact = () => {
+  return <div>contact</div>;
+};

src/pages/shop/product.js

+import React, { useContext } from "react";
+import { ShopContext } from "../../context/shop-context";
+
+export const Product = (props) => {
+  const { id, productName, price, productImage } = props.data;
+  const { addToCart, cartItems } = useContext(ShopContext);
+
+  const cartItemCount = cartItems[id];
+
+  return (
+    <div className="product">
+      <img src={productImage} />
+      <div className="description">
+        <p>
+          <b>{productName}</b>
+        </p>
+        <p> ${price}</p>
+      </div>
+      <button className="addToCartBttn" onClick={() => addToCart(id)}>
+        Add To Cart {cartItemCount > 0 && <> ({cartItemCount})</>}
+      </button>
+    </div>
+  );
+};

src/pages/shop/shop.css

+.shopTitle {
+  margin-top: 100px;
+  text-align: center;
+  font-size: 40px;
+}
+.products {
+  width: 100%;
+  height: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  place-items: center;
+}
+
+.product {
+  border-radius: 15px;
+  width: 300px;
+  height: 350px;
+  margin: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.product img {
+  width: 400px;
+}
+
+.product .description {
+  text-align: center;
+}
+
+.product:hover {
+  transition: 0.3s ease-in;
+  cursor: pointer;
+}
+
+.addToCartBttn {
+  background-color: transparent;
+  border: 2px solid rgb(19, 19, 19);
+  min-width: 100px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-radius: 15px;
+}
+
+.addToCartBttn:hover {
+  background-color: rgb(19, 19, 19);
+  color: white;
+  cursor: pointer;
+}