imageZoom (updated arrows)

frontend/src/Components/RoadDetails/ImageAbleZoom.tsx

@@ -1,19 +1,59 @@
 import React from 'react';
 
 interface ImageClickProps {
+  /** The URL of the image to display in the zoomed view. */
   imageUrl: string;
+  /** A callback function to close the zoomed view. */
   onClose: () => void;
+  /** A callback function for navigating to the previous or next image. */
   onNavigate: (direction: number) => void;
+  /** The index of the currently displayed image. */
   currentImageIndex: number;
+  /** The total number of images in the gallery. */
   totalImages: number;
 }
 
-const ImageZoom: React.FC<ImageClickProps> = ({ imageUrl, onClose }) => {
+/**
+ * ImageZoom make images clickable and open a popup to see image closer
+ */
+// ...
+const ImageZoom: React.FC<ImageClickProps> = ({
+  imageUrl,
+  onClose,
+  onNavigate,
+  currentImageIndex,
+  totalImages,
+}) => {
+  // Check if the left/right navigation arrow should be disabled
+  const isLeftDisabled = currentImageIndex === 0;
+  const isRightDisabled = currentImageIndex === totalImages - 1;
+
+  const handleClickOutside = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
   return (
-    <div className="image-click-modal">
+    <div className="image-click-modal" onClick={handleClickOutside}>
       <div className="image-modal-content">
-        <img src={imageUrl} alt="Zoomed Image" />
+        <button
+          className={`nav-button left ${isLeftDisabled ? 'disabled' : ''}`}
+          onClick={() => onNavigate(-1)}
+          disabled={isLeftDisabled}
+        >
+          &lt; {/* Left arrow symbol */}
+        </button>
+        <img src={imageUrl} draggable="false" alt="Zoomed Image" />
+        <button
+          className={`nav-button right ${isRightDisabled ? 'disabled' : ''}`}
+          onClick={() => onNavigate(1)}
+          disabled={isRightDisabled}
+        >
+          &gt; {/* Right arrow symbol */}
+        </button>
         <span className="close-icon" onClick={onClose}>
+          {/* Close button code */}
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -30,5 +70,6 @@ const ImageZoom: React.FC<ImageClickProps> = ({ imageUrl, onClose }) => {
     </div>
   );
 };
+// ...
 
 export default ImageZoom;

frontend/src/Components/RoadDetails/ImageGallery.tsx

@@ -69,6 +69,10 @@ const images: Image[] = [
   },
 ];
 
+/**
+ * React functional component for the Image Gallery.
+ * Image gallery is for show the real road image, and user can scroll to check
+ */
 const ImageGallery: React.FC = () => {
   const [scrollPosition, setScrollPosition] = useState(0);
   const galleryRef = useRef<HTMLDivElement>(null);

frontend/src/css/road_details.css

@@ -306,3 +306,43 @@ input[type='checkbox'] {
   stroke: #333;
   stroke-width: 0.5;
 }
+
+/* Imgae Zoom arrows style */
+.nav-button {
+  background: none;
+  border: none;
+  font-size: 12px;
+  cursor: pointer;
+  color: #333; /* Color for the arrows */
+  border: none;
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.nav-button.left {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+}
+
+.nav-button.right {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+}
+
+.nav-button:hover {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.nav-button:active {
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.nav-button.disabled {
+  display: none;
+}