Adding real images

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;
 }

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="">
+      {/* Overlay */}
-        <h1 className="px-8 py-2 bg-white text-black font-bold text-2xl">
+      <div className="flex flex-row justify-between box-border w-full z-10 relative">
-          T-Shirt
+        <div className="flex flex-col">
-        </h1>
+          <div>
-        <div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
+            <h1 className="p-3 h-14 bg-white text-black font-bold text-2xl truncate leading-8">
-          $50
+              {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>
   )

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),

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) => (
+      {products.slice(0, 6).map(({ node }) => (
-        <ProductCard {...p} />
+        <ProductCard productData={node} />
       ))}
     </div>
   )