trials of banshee + images scroll

Author: Dowdow

src/assets/projects/banshee/Banshee.png

@@ -19,7 +19,7 @@ export default function App() {
     <>
       <header className="flex items-center w-full h-14 px-4 border-b border-b-prim/5">
         <div className="container mx-auto flex flex-row items-center gap-3 md:gap-12">
-          <Link to="/" className="flex flex-col text-sm md:text-xl font-bold">
+          <Link to="/" className="flex flex-col text-xs md:text-xl font-bold">
             Léo Riera
             <span className="text-xs font-normal text-prim/60">Developer/</span>
           </Link>

src/assets/projects/banshee/Collection.png

@@ -10,31 +10,63 @@ export default function ImageViewer() {
   const [images, setImages] = useState<string[]>([]);
   const [index, setIndex] = useState<number>(0);
 
-  function updateImages(event: CustomEventInit<ImageEvent>) {
-    const { images, index } = event.detail as ImageEvent;
-    setImages(images);
-    setIndex(index);
-    setVisible(true);
-    console.log(event);
-  }
-
   useEffect(() => {
+    function updateImages(event: CustomEventInit<ImageEvent>) {
+      const { images, index } = event.detail as ImageEvent;
+      setImages(images);
+      setIndex(index);
+      setVisible(true);
+    }
+
+    function keyPressed(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setVisible(false);
+      }
+    }
+
     window.addEventListener("image-viewer", updateImages);
+    window.addEventListener("keyup", keyPressed);
     return () => {
       window.removeEventListener("image-viewer", updateImages);
+      window.removeEventListener("keyup", keyPressed);
     };
   }, []);
 
+  useEffect(() => {
+    document.body.style.overflow = visible ? "hidden" : "";
+  }, [visible]);
+
+  useEffect(() => {
+    const target = document.querySelector(`[data-image-index="${index}"]`);
+    if (target) {
+      target.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  }, [index, images]);
+
   return (
     <div
-      className={`${visible ? "fixed" : "hidden"} top-0 left-0 w-full h-full flex justify-center items-center bg-black/50 backdrop-blur`}
+      className={`${visible ? "fixed" : "hidden"} top-0 left-0 w-full h-full bg-black/50 backdrop-blur`}
       onClick={() => setVisible(false)}
     >
-      <img
-        src={images[index]}
-        alt={`Big image ${index + 1}`}
-        className="max-h-3/5 max-w-3/5 shadow-xl rounded"
-      />
+      <div className="relative w-full h-full flex items-center gap-20 snap-x snap-mandatory overflow-x-auto px-2 md:px-10 lg:px-20">
+        {images.map((image, i) => (
+          <div
+            key={i}
+            className="w-full h-full md:h-4/5 md:w-4/5 shrink-0 snap-center"
+            data-image-index={i}
+          >
+            <img
+              src={image}
+              alt={`Big image ${i}`}
+              className="w-full h-full object-contain shrink-0 shadow-xl rounded"
+            />
+          </div>
+        ))}
+      </div>
     </div>
   );
 }