better image carousel

simonyiszk · Feb 17, 2024 · c05aa30 · c05aa30
1 parent d8d62ac
commit c05aa30
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -23,6 +23,10 @@ h2 {
   @apply text-2xl sm:text-3xl md:text-4xl font-bold;
 }
 
+h3 {
+  @apply text-xl sm:text-2xl md:text-3xl font-semibold;
+}
+
 .markdown ul {
   @apply list-disc ml-6;
 }

diff --git a/src/components/image-carousel/carousel.tsx b/src/components/image-carousel/carousel.tsx
@@ -43,7 +43,7 @@ export const Carousel = <T,>({ items, renderItem }: CarouselProps<T>) => {
         />
       </div>
       <ul
-        className='relative w-[300px] sm:w-[616px] md:w-auto mx-auto flex gap-4 overflow-hidden snap-x'
+        className='relative w-[300px] sm:w-[616px] mdx:w-[932px] lg:w-auto mx-auto flex gap-4 overflow-hidden snap-x'
         ref={scrollRef}
       >
         {items.map((item, i) =>

diff --git a/src/components/image-carousel/image-carousel-section.tsx b/src/components/image-carousel/image-carousel-section.tsx
@@ -1,10 +1,12 @@
 'use client';
 
 import 'yet-another-react-lightbox/styles.css';
+import 'yet-another-react-lightbox/plugins/captions.css';
 
 import Image from 'next/image';
 import { useState } from 'react';
 import Lightbox from 'yet-another-react-lightbox';
+import Captions from 'yet-another-react-lightbox/plugins/captions';
 
 import { PrevConfData } from '@/models/models';
 
@@ -17,33 +19,38 @@ type Props = {
 
 export function ImageCarouselSection({ data: { conferences, sectionTitle } }: Props) {
   const [index, setIndex] = useState(-1);
-  const images = conferences[0].imageUrls;
   return (
     <div className='my-16 sm: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}
+          items={conferences}
           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={200}
-                width={300}
-              />
+            <CarouselItem key={item.priority} isSnapPoint={isSnapPoint}>
+              <div className='flex flex-col items-center'>
+                <Image
+                  onClick={() => setIndex(i)}
+                  src={item.imageUrls[0]}
+                  key={item.priority}
+                  alt='Kép korábbi konferenciáról'
+                  className='h-full cursor-pointer rounded-[30px]'
+                  height={200}
+                  width={300}
+                />
+                <h3 className='mt-2'>{item.priority}</h3>
+                <p className='mt-1 text-md sm:text-lg font-medium'>{item.title}</p>
+              </div>
             </CarouselItem>
           )}
         />
       </div>
       <Lightbox
         open={index > -1}
-        index={index}
+        plugins={[Captions]}
         close={() => setIndex(-1)}
-        slides={images.map((i) => ({ src: i }))}
+        slides={
+          index > -1 ? conferences[index].imageUrls.map((i) => ({ src: i, title: conferences[index].title })) : []
+        }
         render={{ slide: NextJsImage }}
       />
     </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -31,7 +31,12 @@ const config: Config = {
     },
     screens: {
       xs: '600px',
-      ...defaultTheme.screens,
+      sm: defaultTheme.screens.sm,
+      md: defaultTheme.screens.md,
+      mdx: '940px',
+      lg: defaultTheme.screens.lg,
+      xl: defaultTheme.screens.xl,
+      '2xl': defaultTheme.screens['2xl'],
     },
   },
   plugins: [],