From 33dd7b0b782931207b9454b845cef5d57404aa4e Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 2 Oct 2020 11:57:11 -0300
Subject: [PATCH] Adding real images

---
 .../ProductCard/ProductCard.module.css        |  2 +-
 .../product/ProductCard/ProductCard.tsx       | 40 ++++++++++++++-----
 .../ProductGrid/ProductGrid.module.css        |  2 +-
 .../product/ProductGrid/ProductGrid.tsx       |  4 +-
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 315a5ef2e..c1e5df87f 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -1,3 +1,3 @@
 .root {
-  @apply relative w-full h-full flex flex-row p-6 box-border justify-between;
+  @apply relative w-full h-full p-6 box-border overflow-hidden;
 }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index d81e1b659..4abbd607a 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -5,22 +5,44 @@ import { Heart } from '@components/icon'
 interface Props {
   className?: string
   children?: any
+  productData: ProductData
 }
 
-const ProductCard: FC<Props> = ({ className }) => {
+interface ProductData {
+  name: string
+  images: any
+}
+
+const ProductCard: FC<Props> = ({ className, productData }) => {
   const rootClassName = cn(s.root, className)
+  console.log(productData)
   return (
     <div className={rootClassName}>
-      <div className="">
-        <h1 className="px-8 py-2 bg-white text-black font-bold text-2xl">
-          T-Shirt
-        </h1>
-        <div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
-          $50
+      {/* 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>
+          <div>
+            <div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
+              $50
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
+          <Heart />
         </div>
       </div>
-      <div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
-        <Heart />
+
+      <div className="absolute top-0 left-0 w-full h-full z-0">
+        <img
+          className="object-cover object-center w-full"
+          src={productData.images.edges[0].node.urlSmall}
+        />
       </div>
     </div>
   )
diff --git a/components/product/ProductGrid/ProductGrid.module.css b/components/product/ProductGrid/ProductGrid.module.css
index 76d5d1853..86cf8b966 100644
--- a/components/product/ProductGrid/ProductGrid.module.css
+++ b/components/product/ProductGrid/ProductGrid.module.css
@@ -3,7 +3,7 @@
   min-height: calc((100vh - 80px - 56px) * 2);
 
   & > * {
-    @apply row-span-1 lg:col-span-1 h-full bg-black;
+    @apply row-span-1 lg:col-span-1 h-full bg-black box-border;
   }
 
   & > div:nth-child(1),
diff --git a/components/product/ProductGrid/ProductGrid.tsx b/components/product/ProductGrid/ProductGrid.tsx
index 0e9cae501..fa8aaedb5 100644
--- a/components/product/ProductGrid/ProductGrid.tsx
+++ b/components/product/ProductGrid/ProductGrid.tsx
@@ -12,8 +12,8 @@ const ProductView: FC<Props> = ({ products, className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
-      {products.slice(0, 6).map((p) => (
-        <ProductCard {...p} />
+      {products.slice(0, 6).map(({ node }) => (
+        <ProductCard productData={node} />
       ))}
     </div>
   )