'use client';

import { useState } from 'react';
import Image from 'next/image';
import { useMediaQuery } from 'usehooks-ts';
import { cva, type VariantProps } from 'class-variance-authority';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Thumbs, FreeMode, Navigation } from 'swiper/modules';
import type { SwiperClass } from 'swiper/react';

import { AspectRatio } from '@/components/ui/aspect-ratio';
import { cn } from '@/lib/utils';

import 'swiper/css';
import 'swiper/css/thumbs';
import 'swiper/css/free-mode';
import 'swiper/css/navigation';

interface ImageObj {
  id: number;
  src: string;
  alt?: string;
}

interface ProductGalleryProps
  extends VariantProps<typeof productGalleryVariant> {
  imageObj: ImageObj[];
  productName?: string;
}

const productGalleryVariant = cva('flex flex-col gap-4 w-full max-w-[420px]', {
  variants: {
    layout: {
      left: 'md:flex-row md:flex-row-reverse',
      right: 'md:flex-row',
      down: 'flex-col',
      top: 'flex-col-reverse',
    },
  },
  defaultVariants: {
    layout: 'down',
  },
});

const swiperSlideGalleryVariant = cva('w-full', {
  variants: {
    layout: {
      left: 'md:basis-[20%]',
      right: 'md:basis-[20%]',
      down: 'basis-auto',
      top: 'basis-auto',
    },
  },
  defaultVariants: {
    layout: 'down',
  },
});

const swiperMainViewVariant = cva('w-full', {
  variants: {
    layout: {
      left: 'md:basis-[80%]',
      right: 'md:basis-[80%]',
      down: '',
      top: '',
    },
  },
  defaultVariants: {
    layout: 'down',
  },
});

interface MainViewProps extends VariantProps<typeof swiperMainViewVariant> {
  thumbsSwiper: SwiperClass | undefined;
  imageObj: ImageObj[];
}

function MainView({ thumbsSwiper, imageObj, layout }: MainViewProps) {
  return (
    <Swiper
      spaceBetween={10}
      thumbs={{ swiper: thumbsSwiper }}
      modules={[FreeMode, Navigation, Thumbs]}
      className={cn(
        'main-view h-[320px] w-full overflow-hidden rounded-md',
        swiperMainViewVariant({ layout }),
      )}
    >
      {imageObj.map((obj) => (
        <SwiperSlide key={obj.id} className="relative cursor-pointer">
          <div className="relative h-full w-full">
            <Image
              src={obj.src}
              alt={obj.alt ?? ''}
              fill
              className="object-cover"
            />
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

function ProductGallery({ imageObj, layout }: ProductGalleryProps) {
  const isDesktop = useMediaQuery('(min-width: 768px)');
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperClass>();

  return (
    <div className={cn(productGalleryVariant({ layout }))}>
      <MainView
        thumbsSwiper={thumbsSwiper}
        imageObj={imageObj}
        layout={layout}
      />

      <Swiper
        onSwiper={setThumbsSwiper}
        spaceBetween={10}
        slidesPerView={4}
        freeMode
        watchSlidesProgress
        direction={
          isDesktop && (layout === 'left' || layout === 'right')
            ? 'vertical'
            : 'horizontal'
        }
        modules={[FreeMode, Navigation, Thumbs]}
        className={cn(
          'thumbs-swiper w-full md:basis-[20%]',
          swiperSlideGalleryVariant({ layout }),
          `${layout === 'left' || layout === 'right' ? 'md:h-[328px]' : ''}`,
        )}
      >
        {imageObj.map((obj) => (
          <SwiperSlide
            key={obj.id}
            className={cn(
              'linear max-h-[78px] cursor-pointer overflow-hidden rounded-md opacity-75 duration-300',
              'hover:opacity-100',
              '[&.swiper-slide-thumb-active]:border-[2px] [&.swiper-slide-thumb-active]:border-black [&.swiper-slide-thumb-active]:opacity-100 [&.swiper-slide-thumb-active]:outline-black',
            )}
          >
            <AspectRatio ratio={1 / 1} className="h-full w-full">
              <Image
                src={obj.src}
                alt={obj.alt ?? ''}
                fill
                className="rounded-md object-cover"
              />
            </AspectRatio>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export { ProductGallery };
Product Gallery

Installation

Usage

Examples

Default
