From 2c6bfcad658fd3149f8daca8fe5f924045df94d1 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Tue, 28 May 2024 16:03:37 +0700
Subject: [PATCH] fix: add srcset for images on homepage

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
 app/page.tsx                         | 2 +-
 components/hero.tsx                  | 3 ++-
 components/page/category-preview.tsx | 1 +
 components/page/image-display.tsx    | 6 ++++--
 package.json                         | 2 +-
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 92fd26864..a39cbaa15 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -23,7 +23,7 @@ export default async function HomePage() {
   return (
     <>
       <Hero />
-      <div className="mt-3">
+      <div className="my-3">
         <Suspense>
           <HomePageContent />
         </Suspense>
diff --git a/components/hero.tsx b/components/hero.tsx
index 2b37240f7..ccd0a9bb3 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -56,10 +56,11 @@ const Hero = () => {
             <Image
               src="/hero-image.jpeg"
               alt="Hero Image"
-              width={1247}
+              width={1103}
               height={626}
               priority
               className="h-full w-full object-cover object-center"
+              sizes="100vw"
             />
           </div>
           <div aria-hidden="true" className="absolute inset-0 bg-gray-900 opacity-60" />
diff --git a/components/page/category-preview.tsx b/components/page/category-preview.tsx
index 23947c78f..11868105c 100644
--- a/components/page/category-preview.tsx
+++ b/components/page/category-preview.tsx
@@ -40,6 +40,7 @@ const CategoryPreview = async ({ block }: { block: Metaobject }) => {
                     title={block.title || 'Image Preview'}
                     fileId={contentBlock.preview_image as string}
                     className="h-full w-full object-cover object-center"
+                    sizes="(min-width: 1024px) 33vw, 100vw"
                   />
                 </Suspense>
               </div>
diff --git a/components/page/image-display.tsx b/components/page/image-display.tsx
index f096a1c30..0a49b79a7 100644
--- a/components/page/image-display.tsx
+++ b/components/page/image-display.tsx
@@ -5,12 +5,13 @@ import { twMerge } from 'tailwind-merge';
 const ImageDisplay = async ({
   fileId,
   title,
-  className
+  className,
+  ...props
 }: {
   fileId: string;
   title: string;
   className?: string;
-}) => {
+} & Omit<React.ComponentProps<typeof Image>, 'src' | 'alt'>) => {
   const image = await getImage(fileId);
   return (
     <Image
@@ -19,6 +20,7 @@ const ImageDisplay = async ({
       width={image.width}
       height={image.height}
       className={twMerge('h-full w-full object-contain', className)}
+      {...props}
     />
   );
 };
diff --git a/package.json b/package.json
index 5c20c0cee..02514fd11 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "packageManager": "pnpm@8.2.0",
+  "packageManager": "pnpm@9.1.2",
   "engines": {
     "node": ">=18",
     "pnpm": ">=7"