Added image component to product images

components/product/ProductCard/ProductCard.tsx

@@ -1,30 +1,50 @@
-import cn from 'classnames'
-import s from './ProductCard.module.css'
 import { FC, ReactNode, Component } from 'react'
+import cn from 'classnames'
+import Image from 'next/image'
+import Link from 'next/link'
+import s from './ProductCard.module.css'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 import { Heart } from '@components/icon'
-import Link from 'next/link'
 
 interface Props {
   className?: string
   children?: ReactNode[] | Component[] | any[]
   product: ProductNode
   variant?: 'slim' | 'simple'
+  imgWidth: number
+  imgHeight: number
+  priority?: boolean
 }
 
-const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
+function getImagePath(imageUrl: string) {
+  const url = new URL(imageUrl)
+  return url.pathname
+}
+
+const ProductCard: FC<Props> = ({
+  className,
+  product: p,
+  variant,
+  imgWidth,
+  imgHeight,
+  priority,
+}) => {
+  const src = getImagePath(p.images.edges?.[0]?.node.urlOriginal!)
+
   if (variant === 'slim') {
     return (
       <div className="relative overflow-hidden box-border">
-        <img
-          className="object-scale-down h-48"
-          src={p.images.edges?.[0]?.node.urlSmall}
-        />
         <div className="absolute inset-0 flex items-center justify-end mr-8">
           <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
             {p.name}
           </span>
         </div>
+        <Image
+          src={src}
+          width={imgWidth}
+          height={imgHeight}
+          priority={priority}
+        />
       </div>
     )
   }
@@ -34,14 +54,8 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       <a
         className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
       >
-        <div className="absolute z-10 inset-0 flex items-center justify-center">
-          <img
-            className="w-full object-cover"
-            src={p.images.edges?.[0]?.node.urlXL}
-          />
-        </div>
         <div className={s.squareBg} />
-        <div className="flex flex-row justify-between box-border w-full z-10 relative">
+        <div className="flex flex-row justify-between box-border w-full z-10 absolute">
           <div className="absolute top-0 left-0">
             <h3 className={s.productTitle}>
               <span>{p.name}</span>
@@ -52,6 +66,12 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
             <Heart />
           </div>
         </div>
+        <Image
+          src={src}
+          width={imgWidth}
+          height={imgHeight}
+          priority={priority}
+        />
       </a>
     </Link>
   )

next.config.js

@@ -1,4 +1,9 @@
 module.exports = {
+  images: {
+    sizes: [320, 480, 1024, 1600],
+    path: 'https://cdn11.bigcommerce.com/',
+    loader: 'bigCommerce',
+  },
   rewrites() {
     return [
       {

package.json

@@ -30,7 +30,7 @@
     "js-cookie": "^2.2.1",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
-    "next": "^9.5.6-canary.9",
+    "next": "file:../next.js/packages/next",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "nextjs-progressbar": "^0.0.6",

pages/index.tsx

@@ -65,13 +65,26 @@ export default function Home({
   return (
     <div className="mt-3">
       <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 : 1024}
+            imgHeight={i === 0 ? 1600 : 1024}
+            priority
+          />
         ))}
       </Grid>
       <Marquee variant="secondary">
         {bestSelling.slice(0, 3).map(({ node }) => (
-          <ProductCard key={node.path} product={node} variant="slim" />
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+          />
         ))}
       </Marquee>
       <Hero
@@ -85,13 +98,25 @@ 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 : 1024}
+            imgHeight={i === 1 ? 1600 : 1024}
+          />
         ))}
       </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">
@@ -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>