chore: upgrade to new image component

Author: fPolic

src/modules/home/components/hero/index.tsx

@@ -1,5 +1,5 @@
 import UnderlineLink from "@modules/common/components/underline-link"
-import Image from "next/legacy/image"
+import Image from "next/image"
 
 const Hero = () => {
   return (
@@ -16,17 +16,19 @@ const Hero = () => {
       </div>
       <Image
         src="/hero.jpg"
-        layout="fill"
         loading="eager"
         priority={true}
         quality={90}
-        objectFit="cover"
         alt="Photo by @thevoncomplex https://unsplash.com/@thevoncomplex"
         className="absolute inset-0"
         draggable="false"
-      />
+        fill
+        sizes="100vw"
+        style={{
+          objectFit: "cover"
+        }} />
     </div>
-  )
+  );
 }
 
 export default Hero

src/modules/layout/components/footer-cta/index.tsx

@@ -1,5 +1,5 @@
 import UnderlineLink from "@modules/common/components/underline-link"
-import Image from "next/legacy/image"
+import Image from "next/image"
 
 const FooterCTA = () => {
   return (
@@ -16,14 +16,16 @@ const FooterCTA = () => {
           <Image
             src="/cta_three.jpg"
             alt=""
-            layout="fill"
-            objectFit="cover"
             className="absolute inset-0"
-          />
+            fill
+            sizes="100vw"
+            style={{
+              objectFit: "cover"
+            }} />
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export default FooterCTA

src/modules/products/components/image-gallary/index.tsx

@@ -1,5 +1,5 @@
 import { Image as MedusaImage } from "@medusajs/medusa"
-import Image from "next/legacy/image"
+import Image from "next/image"
 import { useRef } from "react"
 
 type ImageGalleryProps = {
@@ -35,13 +35,15 @@ const ImageGallery = ({ images }: ImageGalleryProps) => {
               <span className="sr-only">Go to image {index + 1}</span>
               <Image
                 src={image.url}
-                layout="fill"
-                objectFit="cover"
                 className="absolute inset-0"
                 alt="Thumbnail"
-              />
+                fill
+                sizes="100vw"
+                style={{
+                  objectFit: "cover"
+                }} />
             </button>
-          )
+          );
         })}
       </div>
       <div className="flex flex-col flex-1 small:mx-16 gap-y-4">
@@ -55,18 +57,20 @@ const ImageGallery = ({ images }: ImageGalleryProps) => {
             >
               <Image
                 src={image.url}
-                layout="fill"
-                objectFit="cover"
                 priority={index <= 2 ? true : false}
                 className="absolute inset-0"
                 alt={`Product image ${index + 1}`}
-              />
+                fill
+                sizes="100vw"
+                style={{
+                  objectFit: "cover"
+                }} />
             </div>
-          )
+          );
         })}
       </div>
     </div>
-  )
+  );
 }
 
 export default ImageGallery

src/modules/products/components/thumbnail/index.tsx

@@ -1,7 +1,7 @@
 import { Image as MedusaImage } from "@medusajs/medusa"
 import PlaceholderImage from "@modules/common/icons/placeholder-image"
 import clsx from "clsx"
-import Image from "next/legacy/image"
+import Image from "next/image"
 import React from "react"
 
 type ThumbnailProps = {
@@ -39,17 +39,19 @@ const ImageOrPlaceholder = ({
     <Image
       src={image}
       alt="Thumbnail"
-      layout="fill"
-      objectFit="cover"
-      objectPosition="center"
       className="absolute inset-0"
       draggable={false}
-    />
+      fill
+      sizes="100vw"
+      style={{
+        objectFit: "cover",
+        objectPosition: "center"
+      }} />
   ) : (
     <div className="w-full h-full absolute inset-0 bg-gray-100 flex items-center justify-center">
       <PlaceholderImage size={size === "small" ? 16 : 24} />
     </div>
-  )
+  );
 }
 
 export default Thumbnail