diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 9704f5f..c072701 100644 --- a/.gitlab-ci.yml +++ b/.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: diff --git a/src/components/CrossFadeImages.tsx b/src/components/CrossFadeImages.tsx index 5fc8767..9f21c7f 100644 --- a/src/components/CrossFadeImages.tsx +++ b/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; - height: number | string; - images: string[]; - presentationTime: number; - fadeTime: number; + width: number | string; + height: number | string; + images: string[]; + presentationTime: 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 = ({ - width, height, images, presentationTime, fadeTime, + width, height, images, presentationTime, fadeTime, }) => { - const len = images.length; - const SINGLE_IMAGE_TIME = presentationTime + fadeTime; - const TOTAL_TIME = SINGLE_IMAGE_TIME * len; + const len = images.length; + const SINGLE_IMAGE_TIME = presentationTime + fadeTime; + const TOTAL_TIME = SINGLE_IMAGE_TIME * len; - const animation = keyframes` + const animation = keyframes` 0% { opacity: 1; } @@ -62,29 +62,29 @@ const CrossFadeImages: React.FC = ({ } `; - const delays = images.map((_, idx) => idx * SINGLE_IMAGE_TIME).reverse(); + const delays = images.map((_, idx) => idx * SINGLE_IMAGE_TIME).reverse(); - return ( - - {images.map((image, idx) => ( - // eslint-disable-next-line react/no-array-index-key -
0 ? "not-first" : undefined}> - -
- ))} -
- ); + return ( + + {images.map((image, idx) => ( + // eslint-disable-next-line react/no-array-index-key +
0 ? "not-first" : undefined}> + +
+ ))} +
+ ); }; export default CrossFadeImages;