diff --git a/next-env.d.ts b/next-env.d.ts index 7996d35..1970904 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/src/components/CrossFadeImages.tsx b/src/components/CrossFadeImages.tsx index fca6ccc..5fc8767 100644 --- a/src/components/CrossFadeImages.tsx +++ b/src/components/CrossFadeImages.tsx @@ -3,14 +3,14 @@ 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 }>` +const AnimatedImage = styled(Image) <{ $delay: number }>` animation-delay: ${(p) => p.$delay}s; `; @@ -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,27 +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;