feat(gallery): add keyboard control support

src/components/Gallery.astro

@@ -86,9 +86,12 @@ const rowCount = Math.ceil(images.length/3)
       fsContainer.style.pointerEvents = "none"
     })
 
-    for (const img of Array.from(gallery.children) as HTMLImageElement[]) {
+    const isOpen = () => fsContainer.style.opacity !== "0"
+    const images = Array.from(gallery.children) as HTMLImageElement[]
+
+    for (const img of images) {
       img.addEventListener("click", () => {
-        if (fsContainer.style.opacity === "0") {
+        if (!isOpen()) {
           fsContainer.style.opacity = "1"
           fsContainer.style.pointerEvents = "auto"
           fsImg.src = img.src
@@ -99,5 +102,30 @@ const rowCount = Math.ceil(images.length/3)
         }
       })
     }
+
+    let index = 0
+
+    document.addEventListener("keydown", function(event) {
+      if (!isOpen()) return
+
+      switch (event.key) {
+        case "Escape":
+          fsContainer.style.opacity = "0"
+          fsContainer.style.pointerEvents = "none"
+          break
+        case "ArrowLeft":
+          index = images.findIndex(el => el.src === fsImg.src)
+          index = index > 0 ? index - 1 : images.length - 1
+          fsImg.src = images[index]?.src || "???"
+          fsAlt.innerHTML = images[index]?.alt || "???"
+          break
+        case "ArrowRight":
+          index = images.findIndex(el => el.src === fsImg.src)
+          index = index < images.length - 1 ? index + 1 : 0
+          fsImg.src = images[index]?.src || "???"
+          fsAlt.innerHTML = images[index]?.alt || "???"
+          break
+      }
+    })
   }
 </script>