@growth-angels/ds-core 1.13.0 → 1.14.0

package/dist/organisms/Carousel/Carousel.d.ts

@@ -1,5 +1,2 @@
 import { CarouselProps } from "./Carousel.types";
-import "swiper/css";
-import "swiper/css/navigation";
-import "swiper/css/pagination";
 export declare const Carousel: (props: CarouselProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Carousel/Carousel.js

@@ -1,18 +1,159 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../../atoms/atoms";
+import { useBreakpointObserver } from "../../hooks/useBreakPointObserver";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation, Pagination, A11y } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/navigation";
-import "swiper/css/pagination";
 export const Carousel = (props) => {
-    const { children, slidesPerView = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
-    const { useRef, Children } = useReactAdapter();
-    const swiperRef = useRef(null);
+    const { children, slidesPerView = { sm: 1, md: 2, lg: 3, xl: 4 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
+    const { useEffect, useState, useRef, Children } = useReactAdapter();
+    const trackRef = useRef(null);
+    const isNavigatingRef = useRef(false);
     const slides = Children.toArray(children);
-    const displayNavigation = hasNavigation;
-    const displayPagination = hasPagination;
+    const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
+        return Math.max(1, Math.ceil((totalSlides - slidesPerView) / step) + 1);
+    };
+    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const [activeDOMIndex, setActiveDOMIndex] = useState(0);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const [isAtStart, setIsAtStart] = useState(true);
+    const [totalPages, setTotalPages] = useState(0);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const displayNavigation = hasNavigation && (loop || isOverflowing);
+    const displayPagination = hasPagination && (loop || isOverflowing);
+    useEffect(() => {
+        if (loop) {
+            setIsAtStart(false);
+            setIsAtEnd(false);
+        }
+        else {
+            setIsAtStart(activeSlideIndex === 0);
+            setIsAtEnd(activeSlideIndex === totalPages - 1);
+        }
+    }, [activeSlideIndex, totalPages, loop]);
+    const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200, xl: 1400 });
+    useEffect(() => {
+        setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1));
+    }, [breakpoint, slidesPerView]);
+    useEffect(() => {
+        const track = trackRef.current;
+        if (!track)
+            return;
+        const handleScroll = () => {
+            if (loop) {
+                const slideWidth = track.scrollWidth / (slides.length * 3);
+                const scrollLeft = track.scrollLeft;
+                // Repositionnement infini (uniquement si pas en navigation)
+                if (!isNavigatingRef.current) {
+                    if (scrollLeft <= slideWidth * slides.length) {
+                        track.scrollLeft = scrollLeft + slideWidth * slides.length;
+                    }
+                    else if (scrollLeft >= slideWidth * slides.length * 2) {
+                        track.scrollLeft = scrollLeft - slideWidth * slides.length;
+                    }
+                }
+                const scrollPosition = track.scrollLeft + slideWidth / 2;
+                const domIndex = Math.floor(scrollPosition / slideWidth);
+                const index = domIndex % slides.length;
+                setActiveDOMIndex(domIndex);
+                setActiveSlideIndex(index);
+            }
+            else {
+                const slideWidth = track.scrollWidth / slides.length;
+                const scrollPosition = track.scrollLeft + slideWidth / 2;
+                const index = Math.floor(scrollPosition / slideWidth);
+                setActiveSlideIndex(Math.min(index, slides.length - 1));
+                setActiveDOMIndex(index);
+            }
+        };
+        track.addEventListener("scroll", handleScroll);
+        // Position initiale au milieu en mode loop
+        if (loop) {
+            setTimeout(() => {
+                const slideWidth = track.scrollWidth / (slides.length * 3);
+                track.scrollLeft = slideWidth * slides.length;
+            }, 0);
+        }
+        return () => track.removeEventListener("scroll", handleScroll);
+    }, [slides.length, loop]);
+    // Check if the slides overflow the container
+    useEffect(() => {
+        const track = trackRef.current;
+        if (!track)
+            return;
+        const handleResize = () => {
+            setIsOverflowing(track.scrollWidth > track.clientWidth);
+        };
+        handleResize(); // Initial check
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [loop]);
+    const style = Object.fromEntries(Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`]));
+    const goPrev = () => {
+        if (!trackRef.current)
+            return;
+        const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
+        if (activeSlideIndex === 0 && !loop)
+            return;
+        isNavigatingRef.current = true;
+        if (loop) {
+            // En mode loop, on utilise l'index DOM actuel
+            allSlides[activeDOMIndex - 1]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }
+        else {
+            const nextIndex = activeSlideIndex - 1;
+            allSlides[nextIndex]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }
+        setTimeout(() => {
+            isNavigatingRef.current = false;
+        }, 600);
+    };
+    const goNext = () => {
+        if (!trackRef.current)
+            return;
+        const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
+        isNavigatingRef.current = true;
+        if (loop) {
+            // En mode loop, on utilise l'index DOM actuel
+            allSlides[activeDOMIndex + 1]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }
+        else {
+            const totalSlides = allSlides.length;
+            if (activeSlideIndex >= totalSlides - 1)
+                return;
+            if (isAtEnd)
+                return;
+            const nextIndex = activeSlideIndex + 1;
+            allSlides[nextIndex]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }
+        setTimeout(() => {
+            isNavigatingRef.current = false;
+        }, 600);
+    };
+    const goTo = (nextIndex) => {
+        if (!trackRef.current)
+            return;
+        const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
+        slides[nextIndex]?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    };
     const classes = ["ga-ds-carousel"];
     if (props.extraClassNames) {
         if (typeof props.extraClassNames === "string") {
@@ -22,31 +163,19 @@ export const Carousel = (props) => {
             classes.push(...props.extraClassNames);
         }
     }
-    const breakpoints = {
-        0: { slidesPerView: slidesPerView.xs || slidesPerView.sm || 1 },
-        576: { slidesPerView: slidesPerView.sm || 1 },
-        992: { slidesPerView: slidesPerView.md || 2 },
-        1200: { slidesPerView: slidesPerView.lg || 3 },
-        1440: { slidesPerView: slidesPerView.xl || 4 },
-    };
-    return (_jsxs("div", { className: classes.join(" "), children: [navigation?.positionY === "top" && displayNavigation && _jsx(CarouselNavigation, {}), _jsx(Swiper, { modules: [Navigation, Pagination, A11y], spaceBetween: spaceBetween, breakpoints: breakpoints, loop: loop, navigation: displayNavigation
-                    ? {
-                        prevEl: ".ga-ds-carousel__button--prev",
-                        nextEl: ".ga-ds-carousel__button--next",
-                    }
-                    : false, pagination: displayPagination && pagination
-                    ? {
-                        clickable: pagination.clickable,
-                        el: ".ga-ds-carousel__dots",
-                        bulletClass: "ga-ds-carousel__dot",
-                        bulletActiveClass: "ga-ds-carousel__dot--active",
-                    }
-                    : false, onSwiper: (swiper) => {
-                    swiperRef.current = swiper;
-                }, className: "ga-ds-carousel__track", children: context === "wp-editor"
+    return (_jsxs("div", { className: classes.join(" "), style: style, children: [navigation?.positionY === "top" && displayNavigation && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd })), _jsx("div", { className: "ga-ds-carousel__track", ref: trackRef, style: {
+                    "--ga-ds-space-between": `${spaceBetween / 10}rem`,
+                }, children: context === "wp-editor"
                     ? children
-                    : slides.map((child, index) => (_jsx(SwiperSlide, { className: "ga-ds-carousel__slide", children: child }, index))) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [displayPagination && _jsx("div", { className: "ga-ds-carousel__dots" }), displayNavigation && navigation?.positionY === "bottom" && _jsx(CarouselNavigation, {})] })] }));
+                    : slides.map((child, index) => {
+                        return (_jsx("div", { className: `ga-ds-carousel__slide ${index === activeDOMIndex ? "ga-ds-carousel__slide--active" : ""}`, children: child }, index));
+                    }) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [pagination && displayPagination && (_jsx(CarouselPagination, { totalPages: totalPages, activeSlideIndex: activeSlideIndex, goTo: goTo, clickable: pagination.clickable })), displayNavigation && navigation?.positionY === "bottom" && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd }))] })] }));
+};
+const CarouselNavigation = ({ goPrev, goNext, isAtStart, isAtEnd, }) => {
+    return (_jsxs("div", { className: `ga-ds-carousel__arrows`, children: [_jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--prev"], icon: "chevron-left", onClick: goPrev, disabled: isAtStart }), _jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--next"], icon: "chevron-right", onClick: goNext, disabled: isAtEnd })] }));
 };
-const CarouselNavigation = () => {
-    return (_jsxs("div", { className: `ga-ds-carousel__arrows`, children: [_jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--prev"], icon: "chevron-left" }), _jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--next"], icon: "chevron-right" })] }));
+const CarouselPagination = ({ totalPages, activeSlideIndex, goTo, clickable, }) => {
+    return (_jsx("div", { className: "ga-ds-carousel__dots", children: Array.from({ length: totalPages }, (_, index) => index).map((_, index) => (_jsx("span", { className: `ga-ds-carousel__dot ${index === activeSlideIndex ? "ga-ds-carousel__dot--active" : ""}`, onClick: () => clickable && goTo(index), style: {
+                cursor: clickable ? "pointer" : "default",
+            } }, index))) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -37,8 +37,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@growth-angels/foundation": "^1.4.1",
-    "swiper": "^11.1.15"
+    "@growth-angels/foundation": "^1.4.1"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/organisms/Carousel/Carousel.scss

@@ -46,9 +46,6 @@
     flex: 0 0 auto;
     width: 100%;
     scroll-snap-align: start;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
   }
 
   &__arrows {

package/src/organisms/Carousel/Carousel.tsx

@@ -1,17 +1,12 @@
 import { Button } from "../../atoms/atoms"
+import { useBreakpointObserver } from "../../hooks/useBreakPointObserver"
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
 import { CarouselProps } from "./Carousel.types"
-import { Swiper, SwiperSlide } from "swiper/react"
-import { Navigation, Pagination, A11y } from "swiper/modules"
-import type { Swiper as SwiperType } from "swiper"
-import "swiper/css"
-import "swiper/css/navigation"
-import "swiper/css/pagination"
 
 export const Carousel = (props: CarouselProps) => {
   const {
     children,
-    slidesPerView = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4 },
+    slidesPerView = { sm: 1, md: 2, lg: 3, xl: 4 },
     spaceBetween = 20,
     navigation,
     pagination,
@@ -20,12 +15,173 @@ export const Carousel = (props: CarouselProps) => {
     hasNavigation,
     loop = false,
   } = props
-  const { useRef, Children } = useReactAdapter()
-  const swiperRef = useRef<SwiperType | null>(null)
+  const { useEffect, useState, useRef, Children } = useReactAdapter()
+  const trackRef = useRef<HTMLDivElement>(null)
+  const isNavigatingRef = useRef(false)
   const slides = Children.toArray(children)
 
-  const displayNavigation = hasNavigation
-  const displayPagination = hasPagination
+  const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
+    return Math.max(1, Math.ceil((totalSlides - slidesPerView) / step) + 1)
+  }
+
+  const [activeSlideIndex, setActiveSlideIndex] = useState(0)
+  const [activeDOMIndex, setActiveDOMIndex] = useState(0)
+  const [isAtEnd, setIsAtEnd] = useState(false)
+  const [isAtStart, setIsAtStart] = useState(true)
+  const [totalPages, setTotalPages] = useState(0)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+
+  const displayNavigation = hasNavigation && (loop || isOverflowing)
+  const displayPagination = hasPagination && (loop || isOverflowing)
+
+  useEffect(() => {
+    if (loop) {
+      setIsAtStart(false)
+      setIsAtEnd(false)
+    } else {
+      setIsAtStart(activeSlideIndex === 0)
+      setIsAtEnd(activeSlideIndex === totalPages - 1)
+    }
+  }, [activeSlideIndex, totalPages, loop])
+
+  const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200, xl: 1400 })
+
+  useEffect(() => {
+    setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1))
+  }, [breakpoint, slidesPerView])
+
+  useEffect(() => {
+    const track = trackRef.current
+    if (!track) return
+
+    const handleScroll = () => {
+      if (loop) {
+        const slideWidth = track.scrollWidth / (slides.length * 3)
+        const scrollLeft = track.scrollLeft
+
+        // Repositionnement infini (uniquement si pas en navigation)
+        if (!isNavigatingRef.current) {
+          if (scrollLeft <= slideWidth * slides.length) {
+            track.scrollLeft = scrollLeft + slideWidth * slides.length
+          } else if (scrollLeft >= slideWidth * slides.length * 2) {
+            track.scrollLeft = scrollLeft - slideWidth * slides.length
+          }
+        }
+
+        const scrollPosition = track.scrollLeft + slideWidth / 2
+        const domIndex = Math.floor(scrollPosition / slideWidth)
+        const index = domIndex % slides.length
+        setActiveDOMIndex(domIndex)
+        setActiveSlideIndex(index)
+      } else {
+        const slideWidth = track.scrollWidth / slides.length
+        const scrollPosition = track.scrollLeft + slideWidth / 2
+        const index = Math.floor(scrollPosition / slideWidth)
+        setActiveSlideIndex(Math.min(index, slides.length - 1))
+        setActiveDOMIndex(index)
+      }
+    }
+
+    track.addEventListener("scroll", handleScroll)
+
+    // Position initiale au milieu en mode loop
+    if (loop) {
+      setTimeout(() => {
+        const slideWidth = track.scrollWidth / (slides.length * 3)
+        track.scrollLeft = slideWidth * slides.length
+      }, 0)
+    }
+
+    return () => track.removeEventListener("scroll", handleScroll)
+  }, [slides.length, loop])
+
+  // Check if the slides overflow the container
+  useEffect(() => {
+    const track = trackRef.current
+    if (!track) return
+
+    const handleResize = () => {
+      setIsOverflowing(track.scrollWidth > track.clientWidth)
+    }
+
+    handleResize() // Initial check
+
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [loop])
+
+  const style = Object.fromEntries(
+    Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`])
+  )
+
+  const goPrev = () => {
+    if (!trackRef.current) return
+    const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
+    if (activeSlideIndex === 0 && !loop) return
+
+    isNavigatingRef.current = true
+
+    if (loop) {
+      // En mode loop, on utilise l'index DOM actuel
+      allSlides[activeDOMIndex - 1]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start",
+      })
+    } else {
+      const nextIndex = activeSlideIndex - 1
+      allSlides[nextIndex]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start",
+      })
+    }
+
+    setTimeout(() => {
+      isNavigatingRef.current = false
+    }, 600)
+  }
+
+  const goNext = () => {
+    if (!trackRef.current) return
+    const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
+
+    isNavigatingRef.current = true
+
+    if (loop) {
+      // En mode loop, on utilise l'index DOM actuel
+      allSlides[activeDOMIndex + 1]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start",
+      })
+    } else {
+      const totalSlides = allSlides.length
+      if (activeSlideIndex >= totalSlides - 1) return
+      if (isAtEnd) return
+
+      const nextIndex = activeSlideIndex + 1
+      allSlides[nextIndex]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start",
+      })
+    }
+
+    setTimeout(() => {
+      isNavigatingRef.current = false
+    }, 600)
+  }
+
+  const goTo = (nextIndex: number) => {
+    if (!trackRef.current) return
+    const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
+    slides[nextIndex]?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "start",
+    })
+  }
 
   const classes = ["ga-ds-carousel"]
 
@@ -37,68 +193,103 @@ export const Carousel = (props: CarouselProps) => {
     }
   }
 
-  const breakpoints = {
-    0: { slidesPerView: slidesPerView.xs || slidesPerView.sm || 1 },
-    576: { slidesPerView: slidesPerView.sm || 1 },
-    992: { slidesPerView: slidesPerView.md || 2 },
-    1200: { slidesPerView: slidesPerView.lg || 3 },
-    1440: { slidesPerView: slidesPerView.xl || 4 },
-  }
-
   return (
-    <div className={classes.join(" ")}>
-      {navigation?.positionY === "top" && displayNavigation && <CarouselNavigation />}
-
-      <Swiper
-        modules={[Navigation, Pagination, A11y]}
-        spaceBetween={spaceBetween}
-        breakpoints={breakpoints}
-        loop={loop}
-        navigation={
-          displayNavigation
-            ? {
-                prevEl: ".ga-ds-carousel__button--prev",
-                nextEl: ".ga-ds-carousel__button--next",
-              }
-            : false
-        }
-        pagination={
-          displayPagination && pagination
-            ? {
-                clickable: pagination.clickable,
-                el: ".ga-ds-carousel__dots",
-                bulletClass: "ga-ds-carousel__dot",
-                bulletActiveClass: "ga-ds-carousel__dot--active",
-              }
-            : false
-        }
-        onSwiper={(swiper: SwiperType) => {
-          swiperRef.current = swiper
-        }}
+    <div className={classes.join(" ")} style={style}>
+      {navigation?.positionY === "top" && displayNavigation && (
+        <CarouselNavigation goPrev={goPrev} goNext={goNext} isAtStart={isAtStart} isAtEnd={isAtEnd} />
+      )}
+      <div
         className="ga-ds-carousel__track"
+        ref={trackRef}
+        style={
+          {
+            "--ga-ds-space-between": `${spaceBetween / 10}rem`,
+          } as React.CSSProperties
+        }
       >
         {context === "wp-editor"
           ? children
-          : slides.map((child, index) => (
-              <SwiperSlide key={index} className="ga-ds-carousel__slide">
-                {child}
-              </SwiperSlide>
-            ))}
-      </Swiper>
+          : slides.map((child, index) => {
+              return (
+                <div
+                  key={index}
+                  className={`ga-ds-carousel__slide ${index === activeDOMIndex ? "ga-ds-carousel__slide--active" : ""}`}
+                >
+                  {child}
+                </div>
+              )
+            })}
+      </div>
 
       <div className="ga-ds-carousel__navigation">
-        {displayPagination && <div className="ga-ds-carousel__dots"></div>}
-        {displayNavigation && navigation?.positionY === "bottom" && <CarouselNavigation />}
+        {pagination && displayPagination && (
+          <CarouselPagination
+            totalPages={totalPages}
+            activeSlideIndex={activeSlideIndex}
+            goTo={goTo}
+            clickable={pagination.clickable}
+          />
+        )}
+        {displayNavigation && navigation?.positionY === "bottom" && (
+          <CarouselNavigation goPrev={goPrev} goNext={goNext} isAtStart={isAtStart} isAtEnd={isAtEnd} />
+        )}
       </div>
     </div>
   )
 }
 
-const CarouselNavigation = () => {
+const CarouselNavigation = ({
+  goPrev,
+  goNext,
+  isAtStart,
+  isAtEnd,
+}: {
+  goPrev: () => void
+  goNext: () => void
+  isAtStart: boolean
+  isAtEnd: boolean
+}) => {
   return (
     <div className={`ga-ds-carousel__arrows`}>
-      <Button extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--prev"]} icon="chevron-left" />
-      <Button extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--next"]} icon="chevron-right" />
+      <Button
+        extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--prev"]}
+        icon="chevron-left"
+        onClick={goPrev}
+        disabled={isAtStart}
+      />
+      <Button
+        extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--next"]}
+        icon="chevron-right"
+        onClick={goNext}
+        disabled={isAtEnd}
+      />
+    </div>
+  )
+}
+
+const CarouselPagination = ({
+  totalPages,
+  activeSlideIndex,
+  goTo,
+  clickable,
+}: {
+  totalPages: number
+  activeSlideIndex: number
+  goTo: (nextIndex: number) => void
+  clickable: boolean
+}) => {
+  return (
+    <div className="ga-ds-carousel__dots">
+      {Array.from({ length: totalPages }, (_, index) => index).map((_, index) => (
+        <span
+          key={index}
+          className={`ga-ds-carousel__dot ${index === activeSlideIndex ? "ga-ds-carousel__dot--active" : ""}`}
+          onClick={() => clickable && goTo(index)}
+          style={{
+            cursor: clickable ? "pointer" : "default",
+          }}
+        ></span>
+      ))}
     </div>
   )
 }