Improve conf gallery

package.json

@@ -19,10 +19,13 @@
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-portal": "^1.0.4",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@splidejs/react-splide": "^0.7.12",
     "@svgr/webpack": "^8.0.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.10",
+    "@types/react-slick": "^0.23.13",
     "autoprefixer": "^10.4.17",
     "clsx": "^2.1.0",
     "codemirror": "5.65.1",
@@ -50,8 +53,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-medium-image-zoom": "5.1.8",
+    "react-slick": "^0.30.2",
     "server-only": "0.0.1",
     "server-only-context": "^0.1.0",
+    "slick-carousel": "^1.8.1",
     "string-similarity": "^4.0.4",
     "string-strip-html": "^13.4.5",
     "tailwindcss": "^3.4.1",

src/app/conf/2023/gallery/page.tsx

@@ -1,7 +1,8 @@
 import { Metadata } from "next"
 import { images } from "./_conf-images"
+import { ImageCarousel } from "../../_components/imageCarousel"
+import React from "react"
 import NextImage from "next-image-export-optimizer"
-import { Zoom } from "../../_components/zoom"
 
 export const metadata: Metadata = {
   title: "Gallery",
@@ -23,18 +24,25 @@ export default function GalleryPage() {
 
   return (
     <div className="bg-[#f4f6f8]">
-      <div className="container conf-block">
+      <div className="container conf-block gallery-page-images-list">
         {currentImages.map((c, i) => {
-          function getCard(index: number) {
+          function getCard(index: number, { size }: { size: "small" | "big" }) {
+            const { width, height } =
+              size === "small"
+                ? { width: 370, height: 208 }
+                : { width: 748, height: 420 }
+
             return (
               c[index] && (
-                <Zoom>
+                <div className="overflow-hidden rounded-md">
                   <NextImage
-                    alt="Gallery"
-                    className="object-cover aspect-video w-full hover:opacity-75 rounded-md"
+                    alt={"gallery image"}
+                    className="object-cover aspect-video w-full hover:opacity-75"
                     src={c[index]}
+                    width={width}
+                    height={height}
                   />
-                </Zoom>
+                </div>
               )
             )
           }
@@ -43,22 +51,23 @@ export default function GalleryPage() {
             <div key={i} className="grid lg:grid-cols-2 gap-2 mb-2">
               <div className="gap-2 flex flex-col">
                 <div className="grid grid-cols-2 gap-2">
-                  {getCard(0)}
-                  {getCard(1)}
+                  {getCard(0, { size: "small" })}
+                  {getCard(1, { size: "small" })}
                 </div>
-                {getCard(2)}
+                {getCard(2, { size: "big" })}
               </div>
               <div className="gap-2 flex flex-col">
-                {getCard(3)}
+                {getCard(3, { size: "big" })}
                 <div className="grid grid-cols-2 gap-2">
-                  {getCard(4)}
-                  {getCard(5)}
+                  {getCard(4, { size: "small" })}
+                  {getCard(5, { size: "small" })}
                 </div>
               </div>
             </div>
           )
         })}
       </div>
+      <ImageCarousel index={0} images={images} />
     </div>
   )
 }

src/app/conf/_components/imageCarousel.tsx

@@ -0,0 +1,47 @@
+"use client"
+import "react-medium-image-zoom/dist/styles.css"
+
+import NextImage from "next-image-export-optimizer"
+import { StaticImageData } from "next/image"
+import Slider from "react-slick"
+import "slick-carousel/slick/slick.css"
+import "slick-carousel/slick/slick-theme.css"
+import { ComponentProps } from "react"
+
+const settings: ComponentProps<typeof Slider> = {
+  speed: 500,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  initialSlide: 0,
+  adaptiveHeight: true,
+}
+
+interface Props {
+  images: StaticImageData[]
+  index: number
+}
+export const ImageCarousel = ({ images, index }: Props) => {
+  settings.initialSlide = index || 0
+  return (
+    <div className="z-[9999] fixed left-0 top-0 bg-[rgba(0,0,0,0.5)] h-screen w-screen flex justify-center">
+      <div className="w-screen max-w-[1504px]">
+        <Slider {...settings} className="rounded-2xl">
+          {images.map(image => (
+            <div className="w-max">
+              <div className="flex justify-center ">
+                <div className="max-w-max h-max flex justify-center w-full">
+                  <img
+                    key={image.src}
+                    alt={"gallery image"}
+                    className="h-full max-h-screen"
+                    src={image.src}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </Slider>
+      </div>
+    </div>
+  )
+}

src/globals.css

@@ -486,3 +486,8 @@ div[id^="headlessui-menu-items"] {
   font-size: 13px;
   padding: 7px 14px;
 }
+
+/* it means the image is still in loading state */
+.gallery-page-images-list img[style*="background-image"] {
+  filter: blur(3.5px);
+}