Merge pull request #8 from okbel/image-component

Image Component

pages/index.tsx

@@ -65,13 +65,26 @@ export default function Home({
   return (
     <div>
       <Grid>
-        {featured.slice(0, 3).map(({ node }) => (
-          <ProductCard key={node.path} product={node} />
+        {featured.slice(0, 3).map(({ node }, i) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            // The first image is the largest one in the grid
+            imgWidth={i === 0 ? 1600 : 820}
+            imgHeight={i === 0 ? 1600 : 820}
+            priority
+          />
         ))}
       </Grid>
       <Marquee variant="secondary">
-        {bestSelling.slice(3, 6).map(({ node }) => (
-          <ProductCard key={node.path} product={node} variant="slim" />
+        {bestSelling.slice(0, 3).map(({ node }) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+          />
         ))}
       </Marquee>
       <Hero
@@ -85,16 +98,28 @@ export default function Home({
         ‘Natural’."
       />
       <Grid layout="B">
-        {featured.slice(3, 6).map(({ node }) => (
-          <ProductCard key={node.path} product={node} />
+        {featured.slice(3, 6).map(({ node }, i) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            // The second image is the largest one in the grid
+            imgWidth={i === 1 ? 1600 : 820}
+            imgHeight={i === 1 ? 1600 : 820}
+          />
         ))}
       </Grid>
       <Marquee>
         {bestSelling.slice(3, 6).map(({ node }) => (
-          <ProductCard key={node.path} product={node} variant="slim" />
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+          />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-row w-full px-12">
+      <div className="py-12 flex flex-row w-full px-6">
         <div className="pr-3 w-48 relative">
           <div className="sticky top-32">
             <ul className="mb-10">
@@ -122,7 +147,13 @@ export default function Home({
         <div className="flex-1">
           <Grid layout="normal">
             {newestProducts.map(({ node }) => (
-              <ProductCard key={node.path} product={node} variant="simple" />
+              <ProductCard
+                key={node.path}
+                product={node}
+                variant="simple"
+                imgWidth={480}
+                imgHeight={480}
+              />
             ))}
           </Grid>
         </div>

pages/search.tsx

@@ -147,6 +147,8 @@ export default function Search({
                   key={node.path}
                   className="animate__animated animate__fadeIn"
                   product={node}
+                  imgWidth={480}
+                  imgHeight={480}
                 />
               ))}
             </Grid>