do-product-card

Este es un paquete de pruebas de despliegue en NPM

Damian Calderon

Ejemplo

import {ButtonsProduct,ImageProduct,ProductsCard,TitleProduct} from 'do-product-card';

const products = 
  {
    id:'sadfklñjsalñerj',
    title:'Mug coffee',
    img:'./coffee-mug.png'
  }


const App = () => {
  return (
    <div>
      <div >
          <ProductsCard product={products} className='bg-dark'  initValues={{values:10,maxValue:20}}>
            {({counter,incrementBy,reset,maxCount,isMaxCountReached})=>( 
              <>
                    <ImageProduct className={"custom-image"} />
                    <TitleProduct title={products[1].title} className='text-white text-bold' style={{fontSize:'25px'}} />
                    <ButtonsProduct  className='custom-buttons'/>
                    <button onClick={ () => incrementBy(-2) }> -2 </button>
                    {isMaxCountReached && <button onClick={ reset }>Reset</button>}
                    <button onClick={ () => incrementBy(2) }> +2 </button>
                    <p>{counter} - {maxCount}</p>
              </>  
            )}
          </ProductsCard>
        </div>  
    </div>
  );
};