feat(trustlab): add image lightbox preview to HorizontalGallery

apps/trustlab/src/components/Content/Content.js

@@ -15,7 +15,7 @@ const Content = forwardRef((props, ref) => {
   return (
     <Box
       sx={{
-        py: 8,
+        py: 4,
         px: { xs: 2.5 },
         backgroundColor,
       }}
@@ -38,6 +38,7 @@ const Content = forwardRef((props, ref) => {
             color: textColor,
           }}
           TypographyProps={{
+            variant: "p2",
             gutterBottom: true,
             sx: {
               mb: 3,

apps/trustlab/src/components/Content/Content.snap.js

@@ -3,7 +3,7 @@
 exports[`<Content /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiBox-root css-6tfog6"
+    class="MuiBox-root css-286m8z"
     content="[object Object]"
   >
     <div

apps/trustlab/src/components/ContentOverview/ContentOverview.js

@@ -95,7 +95,7 @@ const ContentOverview = forwardRef(function ContentOverview(props, ref) {
 
   return (
     <Box sx={{ backgroundColor: "common.white" }} ref={ref}>
-      <Section sx={{ py: 8, px: { xs: 2.5, md: 0 } }}>
+      <Section sx={{ py: 2, px: { xs: 2.5, md: 0 } }}>
         <Grid container spacing={4} alignItems="flex-start">
           <Grid size={{ xs: 12, sm: 6 }}>
             <LexicalRichText

apps/trustlab/src/components/ContentOverview/ContentOverview.snap.js

@@ -6,7 +6,7 @@ exports[`<ContentOverview /> renders items without labels 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fem14s-MuiContainer-root"
     >
       <div
         class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row MuiGrid2-spacing-xs-4 css-hjjil0-MuiGrid2-root"
@@ -78,7 +78,7 @@ exports[`<ContentOverview /> renders richtext card type 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fem14s-MuiContainer-root"
     >
       <div
         class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row MuiGrid2-spacing-xs-4 css-hjjil0-MuiGrid2-root"
@@ -126,7 +126,7 @@ exports[`<ContentOverview /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fem14s-MuiContainer-root"
     >
       <div
         class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row MuiGrid2-spacing-xs-4 css-hjjil0-MuiGrid2-root"
@@ -255,7 +255,7 @@ exports[`<ContentOverview /> renders with linked item 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fem14s-MuiContainer-root"
     >
       <div
         class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row MuiGrid2-spacing-xs-4 css-hjjil0-MuiGrid2-root"

apps/trustlab/src/components/FeatureList/FeatureList.js

@@ -11,7 +11,7 @@ const FeatureList = forwardRef(function FeatureList(props, ref) {
 
   return (
     <Box sx={{ backgroundColor: "common.white" }} ref={ref}>
-      <Section sx={{ py: 8, px: { xs: 2.5, md: 0 } }}>
+      <Section sx={{ py: 2, px: { xs: 2.5, md: 0 } }}>
         {title ? (
           <Typography
             sx={{

apps/trustlab/src/components/FeatureList/FeatureList.snap.js

@@ -6,7 +6,7 @@ exports[`<FeatureList /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fem14s-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-1dqpc7h"
@@ -65,7 +65,7 @@ exports[`<FeatureList /> renders with 4 items 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fem14s-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-1dqpc7h"
@@ -138,7 +138,7 @@ exports[`<FeatureList /> renders with title and description 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fem14s-MuiContainer-root"
     >
       <p
         class="MuiTypography-root MuiTypography-p1 css-ep2mw7-MuiTypography-root"

apps/trustlab/src/components/Filters/Filters.js

@@ -18,7 +18,7 @@ const defaultIcons = {
 const generateYearOptions = () => {
   const currentYear = new Date().getFullYear();
   const len = currentYear - 2020 + 1;
-  return Array.from({ length: len }, (_, i) => 2020 + i);
+  return Array.from({ length: len }, (_, i) => currentYear - i);
 };
 
 // Generate month options

apps/trustlab/src/components/HighlightList/HighlightList.js

@@ -12,7 +12,7 @@ const HighlightList = forwardRef(function HighlightList(props, ref) {
 
   return (
     <Box sx={{ backgroundColor: "common.white" }} ref={ref}>
-      <Section sx={{ py: 8, px: { xs: 2.5, md: 0 } }}>
+      <Section sx={{ py: 2, px: { xs: 2.5, md: 0 } }}>
         <Typography
           sx={{
             mb: 3,

apps/trustlab/src/components/HighlightList/HighlightList.snap.js

@@ -6,7 +6,7 @@ exports[`<HighlightList /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fem14s-MuiContainer-root"
     >
       <p
         class="MuiTypography-root MuiTypography-p1 css-vdhse4-MuiTypography-root"
@@ -82,7 +82,7 @@ exports[`<HighlightList /> renders with a single item 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fem14s-MuiContainer-root"
     >
       <p
         class="MuiTypography-root MuiTypography-p1 css-vdhse4-MuiTypography-root"

apps/trustlab/src/components/HorizontalGallery/HorizontalGallery.js

@@ -3,6 +3,8 @@ import { Figure, RichTypography } from "@commons-ui/next";
 import { Box, Stack } from "@mui/material";
 import React, { forwardRef, useCallback, useRef, useState } from "react";
 
+import ImageLightbox from "@/trustlab/components/ImageLightbox";
+
 const ITEMS_PER_PAGE = 4;
 
 const HorizontalGallery = forwardRef(function HorizontalGallery(
@@ -11,6 +13,8 @@ const HorizontalGallery = forwardRef(function HorizontalGallery(
 ) {
   const scrollRef = useRef(null);
   const [activePage, setActivePage] = useState(0);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
 
   const pageCount = Math.ceil((images?.length ?? 0) / ITEMS_PER_PAGE);
 
@@ -40,6 +44,25 @@ const HorizontalGallery = forwardRef(function HorizontalGallery(
     chunks.push(images.slice(i, i + ITEMS_PER_PAGE));
   }
 
+  const handleImageClick = useCallback((imageIndex) => {
+    setLightboxIndex(imageIndex);
+    setLightboxOpen(true);
+  }, []);
+
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+
+  const handleLightboxPrevious = useCallback(() => {
+    setLightboxIndex((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  const handleLightboxNext = useCallback(() => {
+    setLightboxIndex((prev) => Math.min(images.length - 1, prev + 1));
+  }, [images?.length]);
+
+  const flatImages = images?.map(({ image }) => image) || [];
+
   if (!images?.length) {
     return null;
   }
@@ -48,7 +71,7 @@ const HorizontalGallery = forwardRef(function HorizontalGallery(
     <Box sx={{ backgroundColor: "common.white" }} ref={ref}>
       <Section
         sx={{
-          py: 8,
+          py: 2,
           px: {
             xs: 2.5,
             sm: 0,
@@ -75,7 +98,7 @@ const HorizontalGallery = forwardRef(function HorizontalGallery(
             "&::-webkit-scrollbar": { display: "none" },
           }}
         >
-          {chunks.map((chunk) => (
+          {chunks.map((chunk, chunkIndex) => (
             <Box
               key={chunk[0].image.id}
               sx={{
@@ -87,39 +110,47 @@ const HorizontalGallery = forwardRef(function HorizontalGallery(
                 gap: 2,
               }}
             >
-              {chunk.map(({ image }) => (
-                <Box
-                  key={image.id}
-                  sx={{
-                    flex: {
-                      xs: "0 0 calc(50% - 8px)",
-                      sm: "0 0 calc(25% - 12px)",
-                    },
-                    minWidth: 0,
-                  }}
-                >
-                  <Figure
-                    ImageProps={{
-                      alt: image.alt || "",
-                      src: image.url,
-                      sx: {
-                        objectFit: "cover",
-                      },
-                    }}
+              {chunk.map(({ image }, itemIndex) => {
+                const flatIndex = chunkIndex * ITEMS_PER_PAGE + itemIndex;
+                return (
+                  <Box
+                    key={image.id}
+                    onClick={() => handleImageClick(flatIndex)}
                     sx={{
-                      m: 0,
-                      height: { xs: 120, sm: 264 },
-                      borderRadius: 2,
-                      overflow: "hidden",
-                      position: "relative",
-                      width: "100%",
-                      "&:hover": {
-                        filter: "none",
+                      flex: {
+                        xs: "0 0 calc(50% - 8px)",
+                        sm: "0 0 calc(25% - 12px)",
                       },
+                      minWidth: 0,
+                      cursor: "pointer",
                     }}
-                  />
-                </Box>
-              ))}
+                  >
+                    <Figure
+                      ImageProps={{
+                        alt: image.alt || "",
+                        src: image.url,
+                        sx: {
+                          objectFit: "cover",
+                        },
+                      }}
+                      sx={{
+                        m: 0,
+                        height: { xs: 120, sm: 264 },
+                        borderRadius: 2,
+                        overflow: "hidden",
+                        position: "relative",
+                        width: "100%",
+                        transition: "transform 0.2s, box-shadow 0.2s",
+                        "&:hover": {
+                          filter: "none",
+                          transform: "scale(1.02)",
+                          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                        },
+                      }}
+                    />
+                  </Box>
+                );
+              })}
             </Box>
           ))}
         </Box>
@@ -151,6 +182,15 @@ const HorizontalGallery = forwardRef(function HorizontalGallery(
           </Stack>
         )}
       </Section>
+
+      <ImageLightbox
+        open={lightboxOpen}
+        onClose={handleLightboxClose}
+        images={flatImages}
+        currentIndex={lightboxIndex}
+        onPrevious={handleLightboxPrevious}
+        onNext={handleLightboxNext}
+      />
     </Box>
   );
 });