feat(SW-96): add navigation controls to gallery dialog

components/Lightbox/Desktop/desktopLightbox.module.css

@@ -46,15 +46,20 @@
 }
 
 .imageCaption {
-  background-color: #f0f0f0;
+  background-color: var(--Base-Surface-Subtle-Normal);
   padding: var(--Spacing-x-half) var(--Spacing-x1);
-  border-radius: 4px;
+  border-radius: var(--Corner-radius-Small);
+}
+
+.mainImageWrapper {
+  position: relative;
+  flex: 1;
+  margin-bottom: var(--Spacing-x2);
 }
 
 .mainImageContainer {
-  flex: 1;
+  width: 100%;
-  position: relative;
+  height: 100%;
-  margin-bottom: var(--Spacing-x2);
   will-change: transform;
   overflow: hidden;
 }
@@ -137,6 +142,7 @@
   cursor: pointer;
   border: none;
   display: flex;
+  z-index: 1;
 }
 
 .navigationButton:hover {
@@ -144,7 +150,7 @@
 }
 
 .prevButton {
-  left: 0;
+  left: var(--Spacing-x2);
 }
 
 .leftTransformIcon {
@@ -152,7 +158,7 @@
 }
 
 .nextButton {
-  right: 0;
+  right: var(--Spacing-x2);
 }
 
 .portraitImage {

components/Lightbox/Desktop/index.tsx

@@ -140,6 +140,16 @@ function Gallery({
     return thumbs
   }
 
+  const handleNext = () => {
+    const nextIndex = (mainImageIndex + 1) % images.length
+    onSelectImage(images[nextIndex])
+  }
+
+  const handlePrev = () => {
+    const prevIndex = (mainImageIndex - 1 + images.length) % images.length
+    onSelectImage(images[prevIndex])
+  }
+
   return (
     <div className={styles.galleryContainer}>
       <Button
@@ -156,24 +166,41 @@ function Gallery({
           <Caption color="textMediumContrast">{mainImage.alt}</Caption>
         </div>
       </div>
-      <AnimatePresence initial={false} mode="wait">
+      <div className={styles.mainImageWrapper}>
-        <motion.div
+        <AnimatePresence initial={false} mode="wait">
-          key={mainImage.url}
+          <motion.div
-          className={styles.mainImageContainer}
+            key={mainImage.url}
-          initial={{ opacity: 0, x: 300 }}
+            className={styles.mainImageContainer}
-          animate={{ opacity: 1, x: 0 }}
+            initial={{ opacity: 0, x: 300 }}
-          exit={{ opacity: 0, x: -300 }}
+            animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.3 }}
+            exit={{ opacity: 0, x: -300 }}
+            transition={{ duration: 0.3 }}
+          >
+            <Image
+              src={mainImage.url}
+              alt={mainImage.alt}
+              layout="fill"
+              objectFit="cover"
+              onClick={onImageClick}
+            />
+          </motion.div>
+        </AnimatePresence>
+        <motion.button
+          className={`${styles.navigationButton} ${styles.prevButton}`}
+          onClick={handlePrev}
         >
-          <Image
+          <ArrowRightIcon
-            src={mainImage.url}
+            color="burgundy"
-            alt={mainImage.alt}
+            className={styles.leftTransformIcon}
-            layout="fill"
-            objectFit="cover"
-            onClick={onImageClick}
           />
-        </motion.div>
+        </motion.button>
-      </AnimatePresence>
+        <motion.button
+          className={`${styles.navigationButton} ${styles.nextButton}`}
+          onClick={handleNext}
+        >
+          <ArrowRightIcon color="burgundy" />
+        </motion.button>
+      </div>
       <div className={styles.thumbnailGrid}>
         <AnimatePresence initial={false}>
           {getThumbImages().map((image, index) => (