JFL-PRODUCTS-PACK

React product package. Contains the necessary components to display a product, image, title, and buttons to increase or decrease the product quantity.

Example:

<ProductCard
  key={product.id}
  product={product}
  className="bg-dark"
  initialValues={{ count: 3, maxCount: 10 }}
  style={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "column",
    background: "#1d1d1d",
  }}
>
  {({ reset, updateValue, isMaxCountReached, count }) => (
    <>
      <ProductImage
        img={product.img}
        className="custom-image"
        style={{
          width: "100px",
          display: "flex",
          justifyContent: "center",
        }}
      />
      <ProductTitle className="text-white text-bold" />
      <ProductButtons
        className="custom-buttons"
        style={{ display: "flex", justifyContent: "center" }}
      />
      <button onClick={reset}>Reset</button>
      <button onClick={() => updateValue(-2)}>-2</button>
      {!isMaxCountReached && (
        <button onClick={() => updateValue(+2)}>+2</button>
      )}
      {/* <h1 style={{ color: "white" }}>{args}</h1> */}
      <span style={{ color: "whitesmoke" }}>{count}</span>
    </>
  )}
</ProductCard>