ImageGallery can now take up whole screen height.

starpep-web · Jan 16, 2025 · 7aee383 · 7aee383
1 parent bd4d059
commit 7aee383
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -20,8 +20,8 @@ const HomePage = async () => {
     <Fragment>
       <ImageGallery
         className="mb-4"
-        maxHeight="400px"
         images={homePage?.data?.attributes?.imageGallery.images}
+        featured
       />
       <TextCard
         className="mb-5"

diff --git a/src/components/cms/common/imageGallery/ImageGallery.module.scss b/src/components/cms/common/imageGallery/ImageGallery.module.scss
@@ -0,0 +1,9 @@
+@import '@styles/mixins';
+
+.featured {
+  max-height: 400px;
+
+  @include media-breakpoint-up(lg) {
+    max-height: calc(100svh - 160px);
+  }
+}
diff --git a/src/components/cms/common/imageGallery/ImageGallery.tsx b/src/components/cms/common/imageGallery/ImageGallery.tsx
@@ -1,14 +1,19 @@
 'use client';
 import React from 'react';
-import Slider from 'react-slick';
+import Slider, { Settings } from 'react-slick';
+import clsx from 'clsx';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import { Maybe } from '@lib/utils/types';
 import { StrapiImage } from '@components/cms/utils/strapiImage';
+import styles from './ImageGallery.module.scss';
+
+const CastSlider = Slider as unknown as React.JSXElementConstructor<Settings & { style: React.CSSProperties }>;
 
 interface Props {
   className?: string
-  maxHeight?: string
+  imageClassName?: string
+  featured?: boolean
   images?: Maybe<{
     data: {
       attributes: Maybe<{
@@ -21,17 +26,25 @@ interface Props {
   }>
 }
 
-export const ImageGallery: React.FC<Props> = ({ className, maxHeight, images }) => {
+export const ImageGallery: React.FC<Props> = ({ className, imageClassName, featured, images }) => {
+  const maxImageHeight = images?.data.reduce((max, cur) => {
+    const height = cur.attributes?.height ?? 0;
+    return max < height ? height : max;
+  }, 0);
+
   if (!images || !images.data.length) {
     return null;
   }
 
   return (
     <section className={className}>
-      <Slider
-        className="mb-5"
+      <CastSlider
+        className={clsx('mb-5', featured && styles.featured)}
+        style={{
+          height: featured ? `${maxImageHeight}px` : undefined
+        }}
         draggable
-        autoplay
+        autoplay={false}
         autoplaySpeed={5000}
         pauseOnHover
         dots
@@ -48,16 +61,22 @@ export const ImageGallery: React.FC<Props> = ({ className, maxHeight, images })
         {
           images.data.map((image, idx) => image && (
             <div key={idx} className="w-100">
-              <StrapiImage
-                className="w-100 h-100 object-fit-contain"
-                loading={idx === 0 ? 'eager' : 'lazy'}
-                style={{ maxHeight }}
-                {...image.attributes}
-              />
+              <div
+                className={clsx(featured && styles.featured)}
+                style={{
+                  height: featured ? `${maxImageHeight}px` : undefined
+                }}
+              >
+                <StrapiImage
+                  className={clsx('w-100 h-100 object-fit-contain', imageClassName)}
+                  loading={idx === 0 ? 'eager' : 'lazy'}
+                  {...image.attributes}
+                />
+              </div>
             </div>
           ))
         }
-      </Slider>
+      </CastSlider>
     </section>
   );
 };