product card initial setup

jetskis · Sep 10, 2023 · ecaf5ec · ecaf5ec
1 parent d0764bf
commit ecaf5ec
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/app/components/sharable/productGrid.jsx b/app/components/sharable/productGrid.jsx
@@ -5,14 +5,36 @@ export const ProductGrid = ({
   bgColor,
   products,
 }) => {
-  // console.log('products', products)
+  console.log('products', products)
   return (
     <section style={{
       backgroundColor: bgColor
-    }} className='p-4 text-center 800:py-20'> 
-      PRODUCT GRID
-
+    }} className='p-4 800:py-20'> 
+    <div className='grid grid-cols-2 gap-4'>
+    {products.map(item => {
+      return (
+        <div className='col-span-1'>
+          <div className='aspect-square bg-primary-green/60' />
+          <h3 className='text-mono-48 my-2'>{item.product?.store.title}</h3>
+          <p>shopify: {item.shopify.title}</p>
+          {/* <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> */}
+          <div className='my-2'>
+            {/* <div className='flex my-4'>
+              <span className='h-10 w-10 rounded-full block mr-2 bg-primary-green' />
+              <span className='h-10 w-10 rounded-full block mr-2 bg-primary-green' />
+              <span className='h-10 w-10 rounded-full block mr-2 bg-primary-green' />
+            </div> */}
+            <div>
+              {/* <button className='button primary small'>Add to Cart</button> */}
+            </div>
+          </div>
+        </div>
+      )
+    })}
+
+    </div>
     </section>
   )
 }
 
+
diff --git a/app/routes/($locale)._index.jsx b/app/routes/($locale)._index.jsx
@@ -59,10 +59,9 @@ export async function loader({context}) {
     }
   })
 
-  console.log('sanity modules', sanityModules)
-
   return {
     sanityPage,
+    sanityModules
   }
 }
 
@@ -78,13 +77,13 @@ export const handle = {
 export default function Homepage() {
 
   const fetcher = useFetcher();
-  const { sanityPage} = useLoaderData()
+  const { sanityPage, sanityModules } = useLoaderData()
 
   return (
     <div className='relative'>
       <>
         <div>
-          <PageComponentList components={sanityPage.modules} />
+          <PageComponentList components={sanityModules} />
         </div>
         {/* Let's make sure to remove the 80px from the sticky top */}
         <div className='min-h-[calc(100vh-120px)] w-screen'>