Merged in feat/SW-1953-change-images-keyboard (pull request #2578)

feat(SW-1953): change images with keyboard in image gallery

* feat(SW-1953): change images with keyboard in image gallery


Approved-by: Anton Gunnarsson
Approved-by: Hrishikesh Vaipurkar

apps/scandic-web/components/Lightbox/FullView/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { AnimatePresence, motion } from "motion/react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
@@ -41,6 +41,22 @@ export default function FullView({
     onPrev()
   }
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "ArrowLeft") {
+      handlePrev()
+    } else if (e.key === "ArrowRight") {
+      handleNext()
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  })
+
   const variants = {
     initial: (animateLeft: boolean) => ({
       opacity: 0,

apps/scandic-web/components/Lightbox/Gallery/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { AnimatePresence, motion } from "motion/react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
@@ -48,6 +48,22 @@ export default function Gallery({
     onSelectImage(images[prevIndex])
   }
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "ArrowLeft") {
+      handlePrev()
+    } else if (e.key === "ArrowRight") {
+      handleNext()
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  })
+
   const variants = {
     initial: (animateLeft: boolean) => ({
       opacity: 0,