Product Card Component Library

Product Card Component Library is a collection of React components that allow you to create a product card with customizable content and behavior. It provides a flexible way to manage product quantity and display product information.

Example usage

<ProductCard
  product={product}
  className="bg-dark text-white"
  initialValues={{
    quantity: 4,
    maxQuantity: 10,
  }}
>
  {({ quantity, isMaxQuantityReached, increaseBy, reset }) => (
    <>
      <ProductImage
        className="custom-image"
        style={{ boxShadow: '10px 10px 10px rgba(0, 0, 0, 0.2)' }}
      />
      <ProductTitle className="text-bold" />
      <ProductButtons className="custom-buttons" />
      <button onClick={reset}>Reset</button>
      <button onClick={() => increaseBy(-2)}>-2</button>
      {!isMaxQuantityReached && (
        <button onClick={() => increaseBy(2)}>+2</button>
      )}
      <span>
        {quantity} - {isMaxQuantityReached.toString()}
      </span>
    </>
  )}
</ProductCard>