Shop cart

App.js

import { Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Shop from "./components/Shop";
import Cart from "./components/Cart";
import itemData from "./ItemData";
import { useState, useEffect } from "react";

export default function App() {
  const [shopItems, setShopItems] = useState(itemData);
  const [cartItems, setCartItems] = useState([]);
  // const [hoodies, watches, shoes] = [...itemData];
  const [hoodies, setHoddies] = useState(shopItems[0]);
  const [watches, setWatches] = useState(shopItems[0]);
  const [shoes, setShoes] = useState(shopItems[0]);
  useEffect(() => {
    setHoddies(itemData[0]);
    setWatches(itemData[1]);
    setShoes(itemData[2]);
    console.log(shopItems);
  }, [shopItems]);
  function handleCountClick(e, name) {
    const sign = e.target.textContent;

    setShopItems((prev) =>
      prev.map((cat) => {
        return cat.map((item) => {
          if (item.name === name) {
            console.log(item);
            return {
              ...item,
              itemCount:
                sign === "+"
                  ? item.itemCount + 1
                  : item.itemCount > 1
                  ? item.itemCount - 1
                  : 1,
            };
          }
          return item;
        });
      })
    );
  }

  function handleCountChange(e, name) {}
  function handleCartClick(name) {}
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/shop"
          element={
            <Shop
              itemData={itemData}
              hoodies={hoodies}
              shoes={shoes}
              watches={watches}
              handleCartClick={handleCartClick}
              handleCountChange={handleCountChange}
              handleCountClick={handleCountClick}
            />
          }
        />
        <Route path="/cart" element={<Cart cartItems={cartItems} />} />
      </Routes>
    </>
  );
}

shop.js

function Shop({
  hoodies,
  watches,
  shoes,
  handleCountClick,
  handleCountChange,
  handleCartClick,
}) {
  
  return (
    <div
      className={`bg-shop gap-3 h-full flex overflow-auto  items-center p-2 flex-col`}
    >
      <div className="bg-gray-400  flex-1 p-2 w-[80%]  grid grid-rows-[auto_repeat(2,1fr)] grid-cols-[repeat(auto-fit,1fr)] md:grid-cols-3 gap-6">
        <div className="w-full col-start-1 col-end-4 text-center bg-[#413F42] text-white p-2 text-4xl">
          Hoodies
        </div>
        {hoodies.map((h) => {
          return (
            <div
              key={h.name}
              className=" flex flex-col  border border-black flex-1 h-[400px]  "
            >
              <h2 className="bg-[#704F4F] text-white  tracking-wider text-center p-1 text-lg font-bold h-auto">
                {h.name}
              </h2>
              <img
                src={h.src}
                alt={h.name}
                className=" flex-1  h-[80%] object-cover"
              />
              <div className="flex text-white bg-[#704F4F] border-t-2 border-black items-center flex-grow-0 flex-wrap justify-between flex-1">
                <h2 className="tracking-wider text-semibold text-2xl text-black bg-red-200">
                  $ {h.price}
                </h2>
                <div className="flex-1 flex justify-center items-center gap-2  ">
                  {" "}
                  <button
                    onClick={(e) => handleCountClick(e, h.name)}
                    className="bg-gray-200  font-serif w-[30px] h-[80%] text-black text-lg"
                  >
                    -
                  </button>{" "}
                  <input
                    onChange={(e) => handleCountChange(e, h.name)}
                    value={h.itemCount}
                    type="number"
                    className="h-[60%] text-center text-black w-[40%] font-mono"
                  />
                  <button
                    onClick={(e) => handleCountClick(e, h.name)}
                    className="bg-gray-200 font-serif w-[30px] h-[80%] text-black text-lg"
                  >
                    +
                  </button>
                </div>
                <button
                  onClick={(e) => handleCartClick(e, h.name)}
                  className="bg-green-600 px-1 font-sans"
                >
                  Add To Cart
                </button>
              </div>
            </div>
          );
        })}
      </div>
      <div className="bg-gray-400  flex-1 p-2 w-[80%]  grid grid-rows-[auto_repeat(2,1fr)] grid-cols-[repeat(auto-fit,1fr)] md:grid-cols-3 gap-6">
        <div className="w-full col-start-1 col-end-4 text-center bg-[#413F42] text-white p-2 text-4xl">
          Watches
        </div>
        {watches.map((h) => {
          return (
            <div
              key={h.name}
              className=" flex flex-col  border border-black flex-1 h-[400px]  "
            >
              <h2 className="bg-[#704F4F] text-white  tracking-wider text-center p-1 text-lg font-bold h-auto">
                {h.name}
              </h2>

              <img
                src={h.src}
                alt={h.name}
                className=" flex-1  h-[80%] object-cover"
              />
              <div className="flex border-t-2 border-black text-white bg-[#704F4F] items-center flex-grow-0 flex-wrap justify-between flex-1">
                <h2 className="tracking-wider text-2xl  text-black bg-red-200">
                  ${h.price}
                </h2>
                <div className="flex-1 flex justify-center items-center gap-2  ">
                  {" "}
                  <button
                    onClick={(e) => handleCountClick(e, h.name)}
                    className="bg-gray-200 font-serif w-[30px] h-[80%] text-black text-lg"
                  >
                    -
                  </button>{" "}
                  <input
                    onChange={(e) => handleCountChange(e, h.name)}
                    value={h.itemCount}
                    type="number"
                    className="h-[60%] text-center text-black w-[40%] font-mono"
                  />
                  <button
                    onClick={(e) => handleCountClick(e, h.name)}
                    className="bg-gray-200 font-serif w-[30px] h-[80%] text-black text-lg"
                  >
                    +
                  </button>
                </div>
                <button
                  onClick={(e) => handleCountClick(e, h.name)}
                  className="bg-green-600 px-1 font-sans"
                >
                  Add To Cart
                </button>
              </div>
            </div>
          );
        })}
      </div>
      <div className="bg-gray-400  flex-1 p-2 w-[80%]  grid grid-rows-[auto_repeat(2,1fr)] grid-cols-[repeat(auto-fit,1fr)] md:grid-cols-3 gap-6">
        <div className="w-full col-start-1 col-end-4 text-center bg-[#413F42] text-white p-2 text-4xl">
          Shoes
        </div>
        {shoes.map((h) => {
          return (
            <div
              key={h.name}
              className=" flex flex-col  border border-black flex-1 h-[400px]  "
            >
              <h2 className="bg-[#704F4F] text-white  tracking-wider text-center p-1 text-lg font-bold h-auto">
                {h.name}
              </h2>
              <img
                src={h.src}
                alt={h.name}
                className=" flex-1  h-[80%] object-cover"
              />

              <div className="flex border-t-2 border-black text-white bg-[#704F4F] items-center flex-grow-0 flex-wrap justify-between flex-1">
                <h2 className="tracking-wider text-2xl text-black bg-yellow-200">
                  ${h.price}
                </h2>
                <div className="flex-1 flex justify-center items-center gap-2  ">
                  {" "}
                  <button
                    onClick={(e) => handleCountClick(e, h.name)}
                    className="bg-gray-200 font-serif w-[30px] h-[80%] text-black text-lg"
                  >
                    -
                  </button>{" "}
                  <input
                    onChange={(e) => handleCountChange(e, h.name)}
                    value={h.itemCount}
                    type="number"
                    className="h-[60%] text-center text-black w-[40%] font-mono"
                  />
                  <button
                    onClick={(e) => handleCountClick(e, h.name)}
                    className="bg-gray-200 font-serif w-[30px] h-[80%] text-black text-lg"
                  >
                    +
                  </button>
                </div>
                <button className="bg-green-600 px-1 font-sans">
                  Add To Cart
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Shop;