Responsive

This commit is contained in:
Belen Curcio
2020-10-03 11:55:37 -03:00
parent 3d3b0f34a9
commit 808ad87413
4 changed files with 37 additions and 14 deletions

View File

@@ -20,25 +20,23 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
<div className={rootClassName}>
{/* Overlay */}
<div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="flex flex-col">
<div>
<h1 className="p-3 h-14 bg-white text-black font-bold text-2xl truncate leading-8">
{productData.name}
</h1>
<div className="flex flex-col flex-1 overflow-hidden">
<div className="flex-1">
<h1 className={s.productTitle}>{productData.name}</h1>
</div>
<div>
<div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
<div className="flex-0">
<div className={s.productPrice}>
${productData.prices.price.value}
</div>
</div>
</div>
<div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
<div className={s.wishlistButton}>
<Heart />
</div>
</div>
<div className="absolute top-0 left-0 w-full h-full z-0">
<div className="absolute box-border top-0 left-0 w-full h-full z-0 m-12">
{/* <img
className="object-cover object-center w-full"
src={productData.images.edges[0].node.urlSmall}