Move const vars to props

src/components/CrossFadeImages.tsx

@@ -4,14 +4,10 @@ import styled, { keyframes, Keyframes } from "styled-components";
 
 interface CrossFadeImagesProps {
   images: string[];
-  width: number | string;
-  height: number | string;
+  presentationTime: number;
+  fadeTime: number;
 }
 
-const SINGLE_IMAGE_PRESENTATION_TIME = 5;
-const SINGLE_CROSSFADE_TIME = 1;
-const SINGLE_IMAGE_TIME = SINGLE_IMAGE_PRESENTATION_TIME + SINGLE_CROSSFADE_TIME;
-
 const AnimatedImage = styled(Image)<{ layout: "fill"; $delay: number }>`
   animation-delay: ${(p) => p.$delay}s;
 `;
@@ -33,22 +29,23 @@ const Container = styled.div<{ $animation: Keyframes; $duration: number; }>`
 `;
 
 const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
-  images,
+  images, presentationTime, fadeTime,
 }) => {
   const len = images.length;
+  const SINGLE_IMAGE_TIME = presentationTime + fadeTime;
   const TOTAL_TIME = SINGLE_IMAGE_TIME * len;
 
   const animation = keyframes`
     0% {
       opacity:1;
     }
-    ${(SINGLE_IMAGE_PRESENTATION_TIME / TOTAL_TIME) * 100}% {
+    ${(presentationTime / TOTAL_TIME) * 100}% {
       opacity:1;
     }
     ${(1 / len) * 100}% {
       opacity:0;
     }
-    ${100 - ((SINGLE_CROSSFADE_TIME / TOTAL_TIME) * 100)}% {
+    ${100 - ((fadeTime / TOTAL_TIME) * 100)}% {
       opacity:0;
     }
     100% {

src/views/ActualPage/ActualPageView.tsx

@@ -52,8 +52,9 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
     </CTASection>
 
     <Gallery>
-      {/* <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} /> */}
       <CrossFadeImages
+        presentationTime={5}
+        fadeTime={1}
         images={[
           "/img/koydenveto-jani-mannonen-miika-koskela-17.jpg",
           "/img/koydenveto-jani-mannonen-miika-koskela-28.jpg",
@@ -61,9 +62,8 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
           "/img/Varaslahto2020-AinoSuomi-73.jpg",
           "/img/wappusitsit-jani-mannonen-29.jpg",
         ]}
-        width={400}
-        height={400}
       />
+
       <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
       <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
     </Gallery>