refactor: address code review feedback

- Remove unnecessary Promise.all from image mapping
- Use stable keys for React list items
- Implement event delegation to prevent memory leaks
- Add accessibility attributes (role, aria-modal, aria-label)
- Add keyboard navigation support (Escape, Arrow keys)

Author: shrvansudhakara

src/components/ui/ImageLightbox.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 interface ImageLightboxProps {
   images: { src: string; alt?: string }[];
@@ -15,17 +15,28 @@ export default function ImageLightbox({
 }: ImageLightboxProps) {
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
 
-  if (!isOpen) return null;
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      } else if (e.key === 'ArrowRight') {
+        goToNext();
+      } else if (e.key === 'ArrowLeft') {
+        goToPrev();
+      }
+    };
 
-  const goToNext = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setCurrentIndex((currentIndex + 1) % images.length);
-  };
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      return () => document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isOpen, currentIndex]);
 
-  const goToPrev = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  if (!isOpen) return null;
+
+  const goToNext = () => setCurrentIndex((currentIndex + 1) % images.length);
+  const goToPrev = () =>
     setCurrentIndex((currentIndex - 1 + images.length) % images.length);
-  };
 
   const handleClose = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -36,11 +47,14 @@ export default function ImageLightbox({
     <div
       className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
       onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Image gallery"
     >
       <button
         onClick={handleClose}
         className="absolute top-4 right-4 text-white text-2xl hover:text-gray-300 z-10"
-        aria-label="Close"
+        aria-label="Close gallery"
       >
         ×
       </button>
@@ -56,23 +70,29 @@ export default function ImageLightbox({
         {images.length > 1 && (
           <>
             <button
-              onClick={goToPrev}
+              onClick={(e) => {
+                e.stopPropagation();
+                goToPrev();
+              }}
               className="absolute left-4 text-white text-4xl hover:text-gray-300"
-              aria-label="Previous"
+              aria-label="Previous image"
             >
               ‹
             </button>
             <button
-              onClick={goToNext}
+              onClick={(e) => {
+                e.stopPropagation();
+                goToNext();
+              }}
               className="absolute right-4 text-white text-4xl hover:text-gray-300"
-              aria-label="Next"
+              aria-label="Next image"
             >
               ›
             </button>
             <div className="absolute bottom-4 flex gap-2">
               {images.map((_, idx) => (
                 <button
-                  key={idx}
+                  key={images[idx].src}
                   onClick={(e) => {
                     e.stopPropagation();
                     setCurrentIndex(idx);

src/components/ui/WorkExperience.astro

@@ -9,12 +9,10 @@ const { entry } = Astro.props;
 const { Content } = await render(entry);
 
 const images = entry.data.images 
-  ? await Promise.all(
-      entry.data.images.map(async (img) => ({
-        src: img.src,
-        alt: entry.data.title,
-      }))
-    )
+  ? entry.data.images.map((img) => ({
+      src: img.src,
+      alt: entry.data.title,
+    }))
   : [];
 ---
 
@@ -58,34 +56,38 @@ const images = entry.data.images
   import { createRoot } from 'react-dom/client';
   import { createElement } from 'react';
 
-  const thumbs = document.querySelectorAll('.work-image-thumb');
+  const container = document.querySelector('.flex.gap-2.flex-wrap.mt-2');
+  if (!container) return;
 
-  thumbs.forEach((thumb) => {
-    thumb.addEventListener('click', () => {
-      const images = JSON.parse(thumb.getAttribute('data-images') || '[]');
-      const index = parseInt(thumb.getAttribute('data-index') || '0');
-      
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-      const root = createRoot(container);
-      
-      const closeHandler = () => {
-        root.unmount();
-        try {
-          document.body.removeChild(container);
-        } catch (e) {
-          // Container may have already been removed; ignore error
-        }
-      };
-      
-      root.render(
-        createElement(ImageLightbox, {
-          images,
-          isOpen: true,
-          initialIndex: index,
-          onClose: closeHandler,
-        })
-      );
-    });
-  });
+  const clickHandler = (event: Event) => {
+    const thumb = (event.target as HTMLElement).closest('.work-image-thumb');
+    if (!thumb || !container.contains(thumb)) return;
+    
+    const images = JSON.parse(thumb.getAttribute('data-images') || '[]');
+    const index = parseInt(thumb.getAttribute('data-index') || '0');
+    
+    const lightboxContainer = document.createElement('div');
+    document.body.appendChild(lightboxContainer);
+    const root = createRoot(lightboxContainer);
+    
+    const closeHandler = () => {
+      root.unmount();
+      try {
+        document.body.removeChild(lightboxContainer);
+      } catch (e) {
+        // Container may have already been removed; ignore error
+      }
+    };
+    
+    root.render(
+      createElement(ImageLightbox, {
+        images,
+        isOpen: true,
+        initialIndex: index,
+        onClose: closeHandler,
+      })
+    );
+  };
+  
+  container.addEventListener('click', clickHandler);
 </script>