From 6d45fd940881faff43a7da58fdc7e1d0d2018b3c Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 6 Nov 2024 16:20:09 +0700
Subject: [PATCH] fix: remove className prop from Image component and adjust
 carousel item styles for consistency

---
 src/app/(investment)/deals/[id]/displayImage.tsx |  2 +-
 src/app/(investment)/deals/[id]/page.tsx         | 10 +++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/app/(investment)/deals/[id]/displayImage.tsx b/src/app/(investment)/deals/[id]/displayImage.tsx
index a39df0f..6bea6bf 100644
--- a/src/app/(investment)/deals/[id]/displayImage.tsx
+++ b/src/app/(investment)/deals/[id]/displayImage.tsx
@@ -30,7 +30,7 @@ const ImageModal = ({ src, alt, width, height, className }: ItemProps) => {
           <DialogTitle>Image Preview</DialogTitle>
           <DialogDescription>Click outside to close the image preview.</DialogDescription>
         </DialogHeader>
-        <Image src={src} alt={alt} width={700} height={400} className={className} />
+        <Image src={src} alt={alt} width={700} height={400} />
         <DialogFooter />
       </DialogContent>
     </Dialog>
diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
index f223de3..fd7618c 100644
--- a/src/app/(investment)/deals/[id]/page.tsx
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -53,10 +53,6 @@ export default async function ProjectDealPage({ params }: { params: { id: number
   const timeDiff = Math.max(new Date(projectData.investment_deadline).getTime() - new Date().getTime(), 0);
   const hourLeft = Math.floor(timeDiff / (1000 * 60 * 60));
 
-  // const carouselData = Array(5).fill({
-  //   src: projectData.card_image_url || "/boiler1.jpg",
-  //   alt: `${projectData.project_name} Image`,
-  // });
   const carouselData = projectMaterial
     ? projectMaterial.flatMap((item) =>
         (item.material_url || ["/boiler1.jpg"]).map((url: string) => ({
@@ -106,8 +102,8 @@ export default async function ProjectDealPage({ params }: { params: { id: number
               <CarouselNext />
             </Carousel>
             {/* second carousel */}
-            <Carousel className="w-full ml-1 h-[100px] mt-5">
-              <CarouselContent className="flex space-x-1">
+            <Carousel className="w-full ml-1 h-[100px] mt-5 overflow-hidden">
+              <CarouselContent className="flex space-x-1 h-[100px]">
                 {carouselData.map((item, index) => (
                   <CarouselItem key={index} className="flex">
                     <DisplayFullImage
@@ -115,7 +111,7 @@ export default async function ProjectDealPage({ params }: { params: { id: number
                       alt={item.alt}
                       width={200}
                       height={100}
-                      className="rounded-lg object-cover basis-0"
+                      className="rounded-lg object-cover h-[100px] w-[200px]"
                     />
                   </CarouselItem>
                 ))}