Merged in feat/SW-1521-image-gallery-lightbox (pull request #1226)

Feat/SW-1521 image gallery lightbox

* feat(SW-1453): added city listing component

* feat(SW-1521): added more generic types to ImageGallery and Lightbox components

* feat(SW-1521): added lightbox functionality for top images

* feat(SW-1521): added support for setting activeIndex on open inside Lightbox


Approved-by: Fredrik Thorsson
Approved-by: Chuma Mcphoy (We Ahead)

components/Lightbox/index.tsx

@@ -15,17 +15,26 @@ export default function Lightbox({
   dialogTitle,
   onClose,
   isOpen,
+  activeIndex = 0,
 }: LightboxProps) {
-  const [selectedImageIndex, setSelectedImageIndex] = useState(0)
+  const [selectedImageIndex, setSelectedImageIndex] = useState(activeIndex)
   const [isFullView, setIsFullView] = useState(false)
 
   useEffect(() => {
     if (isOpen) {
-      setSelectedImageIndex(0)
       setIsFullView(false)
     }
   }, [isOpen])
 
+  useEffect(() => {
+    setSelectedImageIndex(activeIndex)
+  }, [activeIndex])
+
+  function handleClose() {
+    setSelectedImageIndex(0)
+    onClose()
+  }
+
   function handleNext() {
     setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
   }
@@ -39,7 +48,7 @@ export default function Lightbox({
   return (
     <ModalOverlay
       isOpen={isOpen}
-      onOpenChange={onClose}
+      onOpenChange={handleClose}
       className={styles.overlay}
       isDismissable
     >