src/components/products/ProductSlider.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import { Swiper, SwiperSlide } from "swiper/react";
import ProductCard from "./ProductCard";
import "swiper/css";
import Image from "../elements/Image";
import Link from "../elements/Link";
import { SkeletonProduct } from "../elements/Skeleton";
import { useEffect, useRef, useState } from "react";

export default function ProductSlider({ 
  products, 
  bannerMode = false 
}) {
  const [ activeIndex, setActiveIndex ] = useState(0);
  const swiperSliderFirstMove = (swiper) => {
    setActiveIndex(swiper.activeIndex);
  };

  return (
    <>
      { bannerMode && (
        <Image src={products.banner.image} alt={products.banner.name} className={`absolute rounded-r top-0 left-0 h-full max-w-[55%] idt-transition ` + (activeIndex > 0 ? 'brightness-75' : 'brightness-100')} />
      ) }
      <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8} onSlideChange={swiperSliderFirstMove}>
        { bannerMode && (
          <SwiperSlide>
            <Link href={`/shop/search?category=${products.name}`} className="w-full h-full block"></Link>
          </SwiperSlide>
        ) }
        {products?.products?.map((product, index) => (
          <SwiperSlide key={index}>
            <ProductCard data={product} />
          </SwiperSlide>
        ))}
      </Swiper>
      { !products ? <SkeletonProduct /> : ''}
    </>
  )
}