feat: Image modal

src/components/AddSurauForm.tsx

@@ -103,6 +103,9 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
     setMallData(e.id);
   };
 
+  // TODO: Add mechanism to store temporary image url and file key
+  // User can delete the image before submitting the form
+
   const handleUploadThing = (uploadThingUrl: UploadThingFilePath[]) => {
     const images: ImagePreviews[] = [];
     const urls: FilePath[] = [];

src/components/SurauOverview.tsx

@@ -4,6 +4,8 @@ import { useRouter } from "next/router";
 import type { FC } from "react";
 import { capitalizeFirstLetter } from "../utils";
 import { useEffect, useState } from "react";
+import ImageCarousel from "./shared/ImageCarousel";
+import Modal from "./shared/Modal";
 
 type Surau = {
   id: string;
@@ -20,13 +22,19 @@ const SurauOverview: FC<SurauOverviewProps> = ({ surau }) => {
   const [imageHighlighted, setImageHighlighted] = useState<
     SurauPhoto | null | undefined
   >(null);
+  const [showCarousel, setShowCarousel] = useState<boolean>(false);
 
   useEffect(() => {
     if (surau?.images.length) {
       setImageHighlighted(surau.images[0]);
     }
   }, [surau]);
 
+  const handleImageClick = (image: SurauPhoto) => {
+    setImageHighlighted(image);
+    setShowCarousel(true);
+  };
+
   return (
     <>
       <div className="mb-4 flex flex-col">
@@ -52,37 +60,40 @@ const SurauOverview: FC<SurauOverviewProps> = ({ surau }) => {
           </div>
         ) : (
           <>
-            <div className="max-h-72 overflow-hidden rounded-xl bg-gray-200 object-fill">
+            <div className="flex h-72 w-full items-center justify-center overflow-hidden rounded-xl bg-gray-200">
               <Image
                 src={imageHighlighted?.file_path as string}
                 alt=""
-                className="h-full w-full rounded-lg object-fill object-center group-hover:opacity-75"
+                className="h-full w-full rounded-lg object-cover object-center group-hover:opacity-75"
                 width={200}
                 height={200}
                 priority
                 placeholder="blur"
                 blurDataURL="/assets/background/carisuraudefault.png"
+                onClick={() => handleImageClick(imageHighlighted as SurauPhoto)}
               />
             </div>
-            <div className="mt-2 flex items-center justify-center space-x-2 overflow-hidden">
+
+            {showCarousel && imageHighlighted && (
+              <Modal open={showCarousel} setOpen={setShowCarousel}>
+                <ImageCarousel url={imageHighlighted?.file_path} />
+              </Modal>
+            )}
+
+            <div className="mt-2 flex items-center space-x-2 overflow-scroll">
               {surau?.images.map((image) => (
-                <div
+                <Image
                   key={image.id}
-                  className="max-h-24 overflow-hidden rounded-xl bg-gray-200 object-fill"
-                >
-                  <Image
-                    key={image.id}
-                    src={image.file_path}
-                    alt={image.id}
-                    className="h-full w-full rounded-lg object-fill object-center group-hover:opacity-75"
-                    width={100}
-                    height={100}
-                    onClick={() => setImageHighlighted(image)}
-                    placeholder="blur"
-                    blurDataURL="/assets/background/carisuraudefault.png"
-                    priority
-                  />
-                </div>
+                  src={image.file_path}
+                  alt={image.id}
+                  className="h-24 w-36 rounded-lg object-cover hover:cursor-pointer group-hover:opacity-75"
+                  onClick={() => setImageHighlighted(image)}
+                  width={200}
+                  height={200}
+                  placeholder="blur"
+                  blurDataURL="/assets/background/carisuraudefault.png"
+                  priority
+                />
               ))}
             </div>
           </>

src/components/shared/ImageCarousel.tsx

@@ -0,0 +1,23 @@
+import { SurauPhoto } from "@prisma/client";
+import Image from "next/image";
+import React from "react";
+
+type ImageCarouselProps = {
+  url: string;
+};
+
+const ImageCarousel = ({ url }: ImageCarouselProps) => {
+  return (
+    <div className="inset-0 z-0 flex items-center justify-center overflow-y-auto">
+      <Image
+        alt="logoratemysurau"
+        width={500}
+        height={300}
+        priority
+        src={url}
+      />
+    </div>
+  );
+};
+
+export default ImageCarousel;