drop testcafe node back to 16

.gitlab-ci.yml

@@ -67,7 +67,7 @@ build:
       - .next/cache/
 
 test:e2e:
-  image: circleci/node:20-browsers
+  image: circleci/node:16-browsers
   needs: ["install", "build"]
   stage: test
   script:

src/components/CrossFadeImages.tsx

@@ -3,11 +3,11 @@ import Image from "next/image";
 import styled, { keyframes, Keyframes } from "styled-components";
 
 interface CrossFadeImagesProps {
-    width: number | string;
+  width: number | string;
-    height: number | string;
+  height: number | string;
-    images: string[];
+  images: string[];
-    presentationTime: number;
+  presentationTime: number;
-    fadeTime: number;
+  fadeTime: number;
 }
 
 const AnimatedImage = styled(Image) <{ $delay: number }>`
@@ -37,13 +37,13 @@ const Container = styled.div<{ $animation: Keyframes; $duration: number; }>`
 `;
 
 const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
-    width, height, images, presentationTime, fadeTime,
+  width, height, images, presentationTime, fadeTime,
 }) => {
-    const len = images.length;
+  const len = images.length;
-    const SINGLE_IMAGE_TIME = presentationTime + fadeTime;
+  const SINGLE_IMAGE_TIME = presentationTime + fadeTime;
-    const TOTAL_TIME = SINGLE_IMAGE_TIME * len;
+  const TOTAL_TIME = SINGLE_IMAGE_TIME * len;
 
-    const animation = keyframes`
+  const animation = keyframes`
     0% {
       opacity: 1;
     }
@@ -62,29 +62,29 @@ const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
     }
 `;
 
-    const delays = images.map((_, idx) => idx * SINGLE_IMAGE_TIME).reverse();
+  const delays = images.map((_, idx) => idx * SINGLE_IMAGE_TIME).reverse();
 
-    return (
+  return (
-        <Container
+    <Container
-            $animation={animation}
+      $animation={animation}
-            $duration={len * SINGLE_IMAGE_TIME}
+      $duration={len * SINGLE_IMAGE_TIME}
-        >
+    >
-            {images.map((image, idx) => (
+      {images.map((image, idx) => (
-                // eslint-disable-next-line react/no-array-index-key
+        // eslint-disable-next-line react/no-array-index-key
-                <div key={idx} className={idx > 0 ? "not-first" : undefined}>
+        <div key={idx} className={idx > 0 ? "not-first" : undefined}>
-                    <AnimatedImage
+          <AnimatedImage
-                        src={image}
+            src={image}
-                        objectFit="cover"
+            objectFit="cover"
-                        alt=""
+            alt=""
-                        width={width as any}
+            width={width as any}
-                        height={height as any}
+            height={height as any}
-                        layout="responsive"
+            layout="responsive"
-                        $delay={delays[idx]}
+            $delay={delays[idx]}
-                    />
+          />
-                </div>
+        </div>
-            ))}
+      ))}
-        </Container>
+    </Container>
-    );
+  );
 };
 
 export default CrossFadeImages;