logo

ProductCard

A complete product card where you can add the product to your cart, favorite it or share the link page.

AMD Ryzen 7 5700G, 3.8GHz (4.6GHz Max Turbo), AM4

product

$499.99

10 x $99.9

Props:

title

Description: ProductCard title. Type: String. Required.

price

Description: Product price. Type: String. Required.

imgUrl

Description: Product image url. Type: String. Required.

addToCart

Description: AddToCartButtonTitle content. Type: String. Required.

addToCartButtonTitle

Description: Function to invoke to add product in cart. Type: Async function. Required.

priceOnCredit

Description: Product price using credit card. Type: String.

ratings

Description: A string to represent the number of stars to represent the product review average. Type: Some value between 1 and 5, string.

addToFavorites

Description: Function to invoke to add product as favorite. Type: Async function.

removeFromFavorites

Description: Function to invoke to remove product from favorites. Type: Async function.

share

Description: Function to invoke to share product page link. Type: Async function.

isFavorited

Description: Define if a product is on favorites. Type: Boolean.

cardStyle

Description: Card style. Type: CSS Properties.

cardClassName

Description: Card className. Type: String.

titleStyle

Description: Title style. Type: CSS Properties.

titleClassName

Description: Title className. Type: String.

parcelledPriceClassName

Description: ParcelledPrice className. Type: String.

parcelledPriceStyle

Description: ParcelledPrice style. Type: CSS Properties.

totalPriceStyle

Description: TotalPrice style. Type: CSS Properties.

totalPriceClassName

Description: TotalPrice className. Type: String.

addToCartButtonStyle

Description: AddToCart style. Type: CSS Properties.

addToCartButtonClassName

Description: AddToCart className. Type: String.

glassEffect

Description: Applies glassEffect className if true. Type: Boolean. Default: False.

children

Description: A space to render additional content. Type: ReactNode.

Code <ProductCardComponent addToCart={async () => { }} imgUrl={product.url} addToFavorites={async () => { }} ratings='4' title={product.title} price={product.price} priceOnCredit='10 x $99.9' addToCartButtonTitle='Add to cart' />

PabloSilvaDev - © Copyright 2022