Added zoom

renderer/components/ImageOptions.tsx

@@ -7,12 +7,25 @@ const ImageOptions = ({
   zoomAmount: number;
   setZoomAmount: (arg: any) => void;
 }) => {
+  const [zoomLevel, setZoomLevel] = React.useState("125");
+
   const handleZoom = (direction: number) => {
-    console.log(zoomAmount + direction * 25);
     if (direction === 0) {
       setZoomAmount("");
-    } else {
+      setZoomLevel("100");
-      setZoomAmount("zoom-125");
+      console.log("🚀 => file: ImageOptions.tsx:24 => zoomLevel", zoomLevel);
+    } else if (direction === 1 && zoomLevel < "200") {
+      setZoomLevel((parseInt(zoomLevel) + direction * 25).toString());
+      setZoomAmount("zoom-" + zoomLevel);
+      console.log("🚀 => file: ImageOptions.tsx:24 => zoomLevel", zoomLevel);
+    } else if (direction === -1 && zoomLevel > "100") {
+      setZoomLevel((parseInt(zoomLevel) + direction * 25).toString());
+      setZoomAmount("zoom-" + zoomLevel);
+      console.log("🚀 => file: ImageOptions.tsx:24 => zoomLevel", zoomLevel);
+    }
+
+    if (zoomLevel > "200" || zoomLevel < "100") {
+      setZoomAmount("100");
     }
   };
 
@@ -28,13 +41,19 @@ const ImageOptions = ({
           <button className="btn-primary btn">Reset Image</button>
           <div className="flex flex-row items-center gap-2">
             <p className="w-20">Zoom:</p>
-            <button className="btn-primary btn" onClick={() => handleZoom(-1)}>
+            <button
+              className="btn-primary btn"
+              onClick={() => handleZoom(-1)}
+              disabled={zoomLevel === "100"}>
               - 25%
             </button>
             <button className="btn-primary btn" onClick={() => handleZoom(0)}>
               100%
             </button>
-            <button className="btn-primary btn" onClick={() => handleZoom(1)}>
+            <button
+              className="btn-primary btn"
+              onClick={() => handleZoom(1)}
+              disabled={zoomLevel === "200"}>
               + 25%
             </button>
           </div>

renderer/styles/globals.css

@@ -120,9 +120,21 @@
   }
 }
 
+.zoom-100 {
+  transform: scale(1);
+}
 .zoom-125 {
   transform: scale(1.25);
 }
+.zoom-150 {
+  transform: scale(1.5);
+}
+.zoom-175 {
+  transform: scale(1.75);
+}
+.zoom-200 {
+  transform: scale(2);
+}
 
 .animate-step-in {
   animation: animate-step-in 0.6s cubic-bezier(0.07, 0.43, 0.02, 1);