ProductCard Component

import "./ProductCard.css";

export default function ProductCard({ title, price, image, badge }) {
  return (
    <div className="product-card">

      {badge && <div className="badge">{badge}</div>}

      <img src={image} alt={title} />

      <div className="product-info">
        <h4>{title}</h4>
        <span>${price}</span>
      </div>

      <button className="product-btn">Ingredientes</button>
    </div>
  );
}

import { useState, useEffect } from "react";
import ProductCard from "../components/ProductCard/ProductCard";
import { getProductsByCategory } from "../services/api";

export default function Menu() {
  const [products, setProducts] = useState([]);
  const [activeCategoryId, setActiveCategoryId] = useState(null);
  
  useEffect(() => {
    if (activeCategoryId === null) return;
    
    getProductsByCategory(activeCategoryId)
      .then((data) => setProducts(data))
      .catch((err) => console.error(err));
  }, [activeCategoryId]);
  
  return (
    <section className="products-grid">
      {products.map((product) => (
        <ProductCard
          key={product.id}
          title={product.name}
          price={product.price}
          image={product.imageUrl}
          badge={product.badge ?? null}
        />
      ))}
    </section>
  );
}