feat: implement image display modal and refactor FollowShareButtons component

src/app/(investment)/deals/[id]/displayImage.tsx

@@ -0,0 +1,35 @@
+"use client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import Image from "next/image";
+import { StaticImport } from "next/dist/shared/lib/get-img-props";
+import { it } from "node:test";
+
+const ImageModal = ({ item, width }: { item: { src: string | StaticImport; alt: string;} }, number ) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Image src={item.src} alt={item.alt} width={item.width} height={item.height} className="rounded-lg basis-0" />
+      </DialogTrigger>
+      <DialogContent className="">
+        <DialogHeader>
+          <DialogTitle>Image Preview</DialogTitle>
+          <DialogDescription>Click outside to close the image preview.</DialogDescription>
+        </DialogHeader>
+        <Image src={item.src} alt={item.alt} width={700} height={400} />
+        <DialogFooter />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export function DisplayFullImage({ item }: { item: { src: string | StaticImport; alt: string; width: number; height: number } }) {
+  return <ImageModal item={item} />;
+}

src/app/(investment)/deals/[id]/followShareButton.tsx

@@ -10,8 +10,6 @@ import useSession from "@/lib/supabase/useSession";
 import toast from "react-hot-toast";
 
 const FollowShareButtons = () => {
-  const [progress, setProgress] = useState(0);
-  const [tab, setTab] = useState("Pitch");
   const { session, loading } = useSession();
   const user = session?.user;
   const [sessionLoaded, setSessionLoaded] = useState(false);

src/app/(investment)/deals/[id]/page.tsx

@@ -11,6 +11,7 @@ import { Progress } from "@/components/ui/progress";
 import { Separator } from "@/components/ui/separator";
 import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
 import FollowShareButtons from "./followShareButton";
+import { DisplayFullImage } from "./displayImage";
 
 import { getProjectData } from "@/lib/data/projectQuery";
 import { getDealList } from "@/app/api/dealApi";
@@ -19,7 +20,6 @@ import { redirect } from "next/navigation";
 
 export default async function ProjectDealPage({ params }: { params: { id: number } }) {
   const supabase = createSupabaseClient();
-
   const { data: projectData, error: projectDataError } = await getProjectData(supabase, params.id);
 
   if (!projectData) {
@@ -49,6 +49,7 @@ export default async function ProjectDealPage({ params }: { params: { id: number
     alt: `${projectData.project_name} Image`,
   });
 
+
   return (
     <div className="container max-w-screen-xl my-5">
       <div className="flex flex-col gap-y-10">
@@ -91,7 +92,7 @@ export default async function ProjectDealPage({ params }: { params: { id: number
                 <CarouselContent className="flex space-x-1">
                   {carouselData.map((item, index) => (
                     <CarouselItem key={index} className="flex">
-                      <Image src={item.src} alt={item.alt} width={200} height={100} className="rounded-lg basis-0" />
+                      <DisplayFullImage item={item} width={200} height={100}/>
                     </CarouselItem>
                   ))}
                 </CarouselContent>
@@ -140,7 +141,9 @@ export default async function ProjectDealPage({ params }: { params: { id: number
           <div className="flex w-fit">
             <Tabs.Root defaultValue="pitch">
               <Tabs.List className="list-none flex gap-10 text-lg md:text-xl">
-                <Tabs.Trigger value="pitch">Pitch</Tabs.Trigger>
+                <Tabs.Trigger value="pitch" className="text-yellow-300">
+                  Pitch
+                </Tabs.Trigger>
                 <Tabs.Trigger value="general">General Data</Tabs.Trigger>
                 <Tabs.Trigger value="update">Updates</Tabs.Trigger>
               </Tabs.List>