Merge pull request #12 from CambioML/jojo-branch

add imageModal for enlarging images on click

app/components/feature/FeatureImage.tsx

@@ -1,18 +1,29 @@
+'use client';
+
 import { imgPrefix } from '@/app/hooks/useImgPrefix';
 import Image from 'next/image';
+import useImageModal from '@/app/hooks/useImageModal';
 
 interface FeatureImageProps {
   image: string;
   alt: string;
   height?: string;
   shadow?: boolean;
   border?: boolean;
+  enableModal?: boolean;
 }
 
-const FeatureImage = ({ image, alt, height, shadow, border }: FeatureImageProps) => {
+const FeatureImage = ({ image, alt, height, shadow, border, enableModal }: FeatureImageProps) => {
+  const imageModal = useImageModal();
   return (
     <div
-      className={`${border && 'border-solid border-2 border-neutral-100'} ${shadow && 'shadow-lg'} rounded-xl w-full ${height || 'h-[600px]'} relative`}
+      className={`${border && 'border-solid border-2 border-neutral-100'} ${shadow && 'shadow-lg'} rounded-xl w-full ${height || 'h-[600px]'} relative ${enableModal && 'cursor-pointer hover:scale-105 transition-all duration-300'}`}
+      onClick={() => {
+        if (enableModal) {
+          imageModal.setImage(imgPrefix + image);
+          imageModal.onOpen();
+        }
+      }}
     >
       <Image src={imgPrefix + image} fill style={{ objectFit: 'contain' }} alt={alt} />
     </div>

app/components/home-page/UseCaseTab.tsx

@@ -24,7 +24,7 @@ const DemoTab = ({ code, demo, title, image, imageTitle, alt }: DemoTabProps) =>
         <div className="py-5 lg:h-[400px] w-full flex flex-col items-center justify-between">
           <div className="font-semibold text-3xl pb-10">{title}</div>
           {code && <CodeBlock code={code} language="python" />}
-          {demo && <FeatureImage image={demo} alt={alt} height="h-[400px]" />}
+          {demo && <FeatureImage image={demo} alt={alt} height="h-[400px]" enableModal />}
         </div>
       </div>
       <div className="flex w-full items-center justify-center col-span-1 lg:col-span-2">

app/components/modals/ImageModal.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import useImageModal from '@/app/hooks/useImageModal';
+import { X } from '@phosphor-icons/react';
+import { useEffect, useState } from 'react';
+
+const ImageModal = () => {
+  const imageModal = useImageModal();
+
+  const [showModal, setShowModal] = useState(imageModal.isOpen);
+
+  useEffect(() => {
+    setShowModal(imageModal.isOpen);
+  }, [imageModal.isOpen]);
+
+  const handleClose = () => {
+    setTimeout(() => {
+      imageModal.onClose();
+    }, 300);
+  };
+
+  if (!imageModal.isOpen) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className="
+        justify-center
+        items-center
+        flex
+        overflow-x-hidden
+        overflow-y-auto
+        fixed
+        inset-0
+        z-50
+        outline-none
+        focus:outline-none
+        bg-neutral-800/70
+      "
+      >
+        <div
+          className="
+          relative
+          w-full
+          md:w-4/5
+          max-w-screen-2xl
+          my-6
+          mx-auto
+          h-full
+          lg:h-auto
+          md:h-auto
+        "
+        >
+          <div
+            className={`
+          translate
+          duration-300
+          h-full
+          h-full
+          ${showModal ? 'translate-y-0' : 'translate-y-full'}
+          ${showModal ? 'opacity-100' : 'opacity-0'}
+          `}
+          >
+            <div
+              className="
+              translate
+              h-full
+              md:h-auto
+              border-0
+              rounded-lg
+              shadow-lg
+              relative
+              flex
+              flex-col
+              w-full
+              bg-white
+              outline-none
+              focus:outline-none
+            "
+            >
+              <div
+                className="
+                flex
+                items-center
+                p-6
+                rounded-t
+                justify-center
+                relative
+                border-b-[1px]
+              "
+              >
+                <button
+                  onClick={handleClose}
+                  className="
+                  p-1
+                  border=0
+                  hover:opacity-70
+                  transition
+                  absolute
+                  right-9
+                "
+                >
+                  <X size={18} />
+                </button>
+              </div>
+              <div className="flex items-center justify-center h-auto lg:h-[600px] xl:h-[800px] w-auto">
+                <img src={imageModal.image} alt="modal" className="h-auto lg:h-auto w-auto lg:w-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ImageModal;

app/hooks/useImageModal.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+interface ImageModalStore {
+  isOpen: boolean;
+  image: string;
+  onOpen: () => void;
+  onClose: () => void;
+  setImage: (image: string) => void;
+}
+
+const useImageModal = create<ImageModalStore>((set) => ({
+  isOpen: false,
+  image: '',
+  onOpen: () => set({ isOpen: true }),
+  onClose: () => set({ isOpen: false }),
+  setImage: (image) => set({ image }),
+}));
+
+export default useImageModal;

app/layout.tsx

@@ -2,7 +2,8 @@ import { Lato } from 'next/font/google';
 import './globals.css';
 import Navbar from './components/navbar/Navbar';
 import Footer from './components/footer/Footer';
-import NotifyModal from './components/modals/DemoModal';
+import DemoModal from './components/modals/DemoModal';
+import ImageModal from './components/modals/ImageModal';
 import ToasterProvider from './providers/ToasterProvider';
 
 export const metadata = {
@@ -22,7 +23,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className={font.className}>
         <ToasterProvider />
         <Navbar />
-        <NotifyModal />
+        <DemoModal />
+        <ImageModal />
         <div className="pb-500 pt-[75px] min-h-screen min-w-[650px]">
           {children}
           <Footer />