getting there

package.json

@@ -27,6 +27,7 @@
     "react-dom": "^18",
     "react-icons": "^4.12.0",
     "react-markdown": "^9.0.1",
+    "react-snap-carousel": "^0.4.0",
     "remark-gfm": "^4.0.0",
     "yet-another-react-lightbox": "^3.16.0"
   },

src/app/page.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 
 import { metadata } from '@/app/layout';
-import { ImageCarousel } from '@/components/image-carousel';
+import { ImageCarouselSection } from '@/components/image-carousel/image-carousel-section';
 import { SponsorSection } from '@/components/sponsors/sponsor-section';
 import { CountdownTile } from '@/components/tiles/countdown-tile';
 import { GiveawayTile } from '@/components/tiles/giveaway-tile';
@@ -49,7 +49,7 @@ export default async function Landing() {
           </div>
           <Image src={redPlanet} alt='Vörös bolygó' className='planet red-planet' />
         </div>
-        {data.previousConferences.conferences.length > 0 && <ImageCarousel data={data.previousConferences} />}
+        {data.previousConferences.conferences.length > 0 && <ImageCarouselSection data={data.previousConferences} />}
         <Image src={whitePlanet} alt='Fehér bolygó' className='planet white-planet' />
       </div>
       <SponsorSection companies={data.sponsors.companies} sectionTitle={data.sponsors.sectionTitle} />

src/components/image-carousel/carousel.tsx

@@ -0,0 +1,72 @@
+import React, { CSSProperties } from 'react';
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { useSnapCarousel } from 'react-snap-carousel';
+
+const styles = {
+  root: {},
+  scroll: {
+    scrollSnapType: 'x mandatory',
+  },
+  item: {
+    flexShrink: 0,
+  },
+  itemSnapPoint: {
+    scrollSnapAlign: 'start',
+  },
+  nextPrevButton: {},
+  nextPrevButtonDisabled: { opacity: 0.3 },
+} satisfies Record<string, CSSProperties>;
+
+interface CarouselProps<T> {
+  readonly items: T[];
+  readonly renderItem: (props: CarouselRenderItemProps<T>) => React.ReactElement<CarouselItemProps>;
+}
+
+interface CarouselRenderItemProps<T> {
+  readonly item: T;
+  readonly isSnapPoint: boolean;
+  readonly index: number;
+}
+
+export const Carousel = <T,>({ items, renderItem }: CarouselProps<T>) => {
+  const { scrollRef, pages, activePageIndex, prev, next, snapPointIndexes } = useSnapCarousel();
+  return (
+    <div>
+      <div className='flex justify-center items-center gap-4 mb-4' aria-hidden>
+        <FaArrowLeft
+          className={`${activePageIndex === 0 ? 'opacity-30' : ''} cursor-pointer text-3xl`}
+          onClick={() => prev()}
+        />
+        <FaArrowRight
+          className={`${activePageIndex === pages.length - 1 ? 'opacity-30' : ''} cursor-pointer text-3xl`}
+          onClick={() => next()}
+        />
+      </div>
+      <ul className='relative flex gap-4 overflow-hidden snap-x' ref={scrollRef}>
+        {items.map((item, i) =>
+          renderItem({
+            item,
+            isSnapPoint: snapPointIndexes.has(i),
+            index: i,
+          })
+        )}
+      </ul>
+    </div>
+  );
+};
+
+interface CarouselItemProps {
+  readonly isSnapPoint: boolean;
+  readonly children?: React.ReactNode;
+}
+
+export const CarouselItem = ({ isSnapPoint, children }: CarouselItemProps) => (
+  <li
+    style={{
+      ...styles.item,
+      ...(isSnapPoint ? styles.itemSnapPoint : {}),
+    }}
+  >
+    {children}
+  </li>
+);

src/components/image-carousel/image-carousel-section.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import 'yet-another-react-lightbox/styles.css';
+
+import Image from 'next/image';
+import { useState } from 'react';
+import Lightbox from 'yet-another-react-lightbox';
+
+import { PrevConfData } from '@/models/models';
+
+import NextJsImage from '../next-js-image';
+import { Carousel, CarouselItem } from './carousel';
+
+type Props = {
+  data: PrevConfData;
+};
+
+export function ImageCarouselSection({ data: { conferences, sectionTitle } }: Props) {
+  const [index, setIndex] = useState(-1);
+  const images = conferences[0].imageUrls;
+  return (
+    <div className='my-40'>
+      <h2 className='flex justify-center mb-4'>{sectionTitle}</h2>
+      <div className='w-full max-w-6xl px-6 xl:px-0'>
+        <Carousel
+          items={images}
+          renderItem={({ item, isSnapPoint, index: i }) => (
+            <CarouselItem key={item} isSnapPoint={isSnapPoint}>
+              <Image
+                onClick={() => setIndex(i)}
+                src={item}
+                key={item}
+                alt='Kép korábbi konferenciáról'
+                className='h-full cursor-pointer rounded-[30px]'
+                height={225}
+                width={300}
+              />
+            </CarouselItem>
+          )}
+        />
+      </div>
+      <Lightbox
+        open={index > -1}
+        index={index}
+        close={() => setIndex(-1)}
+        slides={images.map((i) => ({ src: i }))}
+        render={{ slide: NextJsImage }}
+      />
+    </div>
+  );
+}

yarn.lock

@@ -3077,6 +3077,11 @@ react-markdown@^9.0.1:
     unist-util-visit "^5.0.0"
     vfile "^6.0.0"
 
+react-snap-carousel@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/react-snap-carousel/-/react-snap-carousel-0.4.0.tgz#526626f980edf1b37a8bc99310086cd39cf0078d"
+  integrity sha512-uPrXbH2BxJnPodQ+GwEYnbygGZ368RpnAJkNYyiOfko3i0D5cIAuSA4mz+pv9r/O5WhIMo5WOuP4DU56sO7QeA==
+
 react@^18:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"