Untitled

import { useState, useEffect } from "react";

function App() {
  const [products, setProducts] = useState([]);
  const [allProducts, setAllProducts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "https://639c774e42e3ad692732b42f.mockapi.io/products"
        );
        const json = await response.json();
        setProducts(json);
        setAllProducts(json);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  const filterByCategory = (category) => {
    const filteredData = allProducts.filter((item) => item.categories === category);
    setProducts(filteredData);
  };

  return (
    <div>
      <div>
        <div>
          <h2 className="text-[45px] font-bold mt-2 mx-10">
            Filter by Category
          </h2>
          <div className="flex ml-10">
            <button
              onClick={() => setProducts(allProducts)}
              className="text-[30px] mr-10 w-[200px] h-[60px] rounded-lg bg-orange-300 text-gray-500 "
            >
              All
            </button>
            <button
              onClick={() => filterByCategory("Fantastic")}
              className="text-[30px] mr-10 w-[200px] h-[60px] rounded-lg bg-orange-300 text-gray-500"
            >
              Category 1
            </button>
            <button className="text-[30px] mr-10 w-[200px] h-[60px] rounded-lg bg-orange-300 text-gray-500">
              Category 2
            </button>
            <button className="text-[30px] mr-10 w-[200px] h-[60px] rounded-lg bg-orange-300 text-gray-500">
              Category 3
            </button>
          </div>
        </div>
        <div>
          <h2 className="text-[45px] font-bold mt-2 mx-10">
            Filter by Material
          </h2>
          <div className="flex ml-10">
            <button className="text-[30px] mr-10 w-[200px] h-[60px] rounded-lg bg-orange-300 text-gray-500 ">
              All
            </button>
            <button className="text-[30px] mr-10 w-[200px] h-[60px] rounded-lg bg-orange-300 text-gray-500">
              Material 1
            </button>
            <button className="text-[30px] mr-10 w-[200px] h-[60px] rounded-lg bg-orange-300 text-gray-500">
              Material 2
            </button>
            <button className="text-[30px] mr-10 w-[200px] h-[60px] rounded-lg bg-orange-300 text-gray-500">
              Material 3
            </button>
          </div>
        </div>
      </div>
      <div className="grid grid-cols-4 p-3 gap-6 mt-[40px]">
        {products.map((item) => (
          <div
            key={item.id}
            className="shadow-lg rounded-lg hover:scale-105 duration-300 p-4 border rounded-lg border-gray-200"
          >
            <img src={item.imageUrl} alt={item.name} className="rounded-lg" />
            <p className="text-[25px] font-bold">{item.name}</p>
            <p className="text-[25px] font-bold">{item.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;