tee3apps-cms-sdk-react 0.0.19 → 0.0.22

package/src/PageComponents/Visual-Components/CarouselComponent.tsx

@@ -1,364 +1,497 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Linodeurl } from '../../const';
-
-// Types for the carousel props
-interface Slide {
-  sl_id: string;
-  name: string;
-  sl_type: string;
-  image: {
-    isDynamic: boolean;
-    url: string;
-    alt: string;
-    width: number | null;
-    height: number | null;
-  };
-  video: {
-    url?: string;
-    alt?: string;
-  };
-  link_type: string; // NONE | EXTERNALLINK | PRODUCT | TAG | PAGE
-  product: any;
-  tag: any;
-  page: any;
-  external_link: {
-    url: string;
-    target: string;
-  };
-}
-
-interface SlideMode {
-  web: {
-    slidesToShow: number;
-  };
-  mobileweb: {
-    slidesToShow: number;
-  };
-  mobileapp: {
-    slidesToShow: number;
-  };
-  tablet: {
-    slidesToShow: number;
-  };
-}
-
-interface SlidesData {
-  all: Slide[];
-  mode: SlideMode;
-}
-
-export interface CarouselProps {
-  name: string;
-  code: string;
-  scrollMode: string;
-  autoplay: boolean;
-  autoplayInterval: number;
-  pauseOnHover: boolean;
-  speed: number;
-  height: string;
-  vertical: boolean;
-  sliderArrowVisible: boolean;
-  pagingDotVisible: boolean;
-  objectFit: string;
-  slides: SlidesData[];
-}
-
-interface CarouselComponentMainProps {
-  props: CarouselProps;
-  deviceMode?: string;
-}
-
-const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
-  props,
-  deviceMode = 'web'
-}) => {
-  const [currentSlide, setCurrentSlide] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(props.autoplay);
-  const [isHovered, setIsHovered] = useState(false);
-  
-  const slides = props.slides[0].all;
-  const totalSlides = slides.length;
-
-  // Function to go to next slide (advance by 1 to support wrap pairs)
-  const nextSlide = useCallback(() => {
-    setCurrentSlide((prev) => (prev + 1) % totalSlides);
-  }, [totalSlides]);
-
-  // Function to go to previous slide
-  const prevSlide = useCallback(() => {
-    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
-  }, [totalSlides]);
-
-  // Function to go to specific slide start index
-  const goToSlide = (index: number) => {
-    setCurrentSlide(index % totalSlides);
-  };
-
-  // Handle autoplay
-  useEffect(() => {
-    if (!props.autoplay || !isPlaying || isHovered) return;
-
-    const interval = setInterval(() => {
-      nextSlide();
-    }, props.autoplayInterval);
-
-    return () => clearInterval(interval);
-  }, [props.autoplay, props.autoplayInterval, isPlaying, isHovered, nextSlide]);
-
-  // Handle pause on hover
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-    if (props.pauseOnHover) {
-      setIsPlaying(false);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-    if (props.pauseOnHover) {
-      setIsPlaying(true);
-    }
-  };
-
-  // Get current mode settings
-  const getCurrentMode = () => {
-    switch(deviceMode) {
-      case 'mobileweb':
-        return props.slides[0].mode.mobileweb;
-      case 'mobileapp':
-        return props.slides[0].mode.mobileapp;
-      case 'tablet':
-        return props.slides[0].mode.tablet;
-      case 'web':
-      default:
-        return props.slides[0].mode.web;
-    }
-  };
-
-  const currentMode = getCurrentMode();
-  const slidesToShow = currentMode.slidesToShow;
-
-  const resolveAssetUrl = (url?: string) => {
-    if (!url) return '';
-    if (url.startsWith('http://') || url.startsWith('https://')) return url;
-    return `${Linodeurl}${url}`;
-  };
-
-  const buildLinkForSlide = (slide: Slide) => {
-    console.warn(slide)
-    switch (slide.link_type) {
-      case 'NONE':
-        return null;
-      case 'EXTERNALLINK':
-        return `${slide.external_link?.url || ''}`;
-      case 'PRODUCT': {
-        const product: any = slide.product || {};
-        const pdType = product?.pd_type || product?.product_type;
-        const code = product?.code || '';
-         if (!code) return null;
-
-        return pdType === 'VARIANT'
-        ? `/variant/${code}`
-        : `model/${code}`;
-      }
-      case 'TAG': {
-        const tag: any = slide.tag || {};
-        if (!tag.code) return null;
-        return `/tag/${tag?.code}`;
-      }
-      case 'PAGE': {
-        const page: any = slide.page || {};
-        const pageId = page._id
-        const pgType=page.page_type
-        return `/page/${pageId}?type=${pgType}`;
-      }
-      default:
-        return null;
-    }
-  };
-
-  const handleSlideClick = (slide: Slide) => {
-    const link = buildLinkForSlide(slide);
-    if (link === null) return;
-    if (typeof link === 'string') {
-      if (link.startsWith('http')) {
-        window.open(link, '_blank');
-      } else {
-        window.location.href = link;
-      }
-      return;
-    }
-    const queryString = Object.entries((link as any).query || {})
-      .map(([key, value]) => `${key}=${encodeURIComponent(value as string)}`)
-      .join('&');
-    const fullPath = `${(link as any).pathname}${queryString ? `?${queryString}` : ''}`;
-    window.location.href = fullPath;
-  };
-
-  return (
-    <div 
-      className="carousel-container"
-      style={{
-        position: 'relative',
-        width: '100%',
-        overflow: 'hidden'
-      }}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      {/* Slides container */}
-      <div
-        className="carousel-slides"
-        style={{
-          display: 'flex',
-          width: '100%',
-          transition: `opacity ${props.speed}ms ease`,
-          flexDirection: props.vertical ? 'column' : 'row'
-        }}
-      >
-        {Array.from({ length: slidesToShow }).map((_, offset) => {
-          const slide = slides[(currentSlide + offset) % totalSlides];
-          const clickable = buildLinkForSlide(slide) !== null;
-          return (
-            <div
-              key={`${slide.sl_id}-${offset}`}
-              className="carousel-slide"
-              style={{
-                flex: `0 0 ${100 / slidesToShow}%`,
-                width: props.vertical ? '100%' : `${100 / slidesToShow}%`,
-                overflow: 'hidden',
-                display: 'block',
-                cursor: clickable ? 'pointer' : 'default'
-              }}
-              onClick={clickable ? () => handleSlideClick(slide) : undefined}
-            >
-              {slide.sl_type === 'video' ? (
-                <video
-                  src={resolveAssetUrl(slide.video?.url)}
-                  style={{ width: '100%', height: 'auto', display: 'block' }}
-                  autoPlay={props.autoplay}
-                  muted
-                  loop
-                  controls={!props.autoplay}
-                />
-              ) : (
-                <img
-                  src={resolveAssetUrl(slide.image?.url)}
-                  alt={slide.image?.alt || ''}
-                  style={{ width: '100%', height: 'auto', display: 'block' }}
-                />
-              )}
-            </div>
-          );
-        })}
-        
-      </div>
-
-      {/* Navigation arrows */}
-      {props.sliderArrowVisible && totalSlides > slidesToShow && (
-        <>
-         <button
-  className="carousel-arrow carousel-arrow-prev"
-  onClick={prevSlide}
-  style={{
-    position: 'absolute',
-    ...(props.vertical
-      ? { top: '10px', left: '50%', transform: 'translateX(-50%)' }
-      : { top: '50%', left: '1px', transform: 'translateY(-50%)' }),
-    zIndex: 10,
-    background: 'white', 
-    color: 'black',
-    border: '2px solid white', 
-    boxShadow: '0 2px 6px rgba(0,0,0,0.5)', 
-    borderRadius: '15%',
-    width: '40px',
-    height: '60px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '20px',
-    fontWeight: 'bold',
-    transition: 'transform 0.2s ease-in-out',
-    
-  }}
->
-  {props.vertical ? '˄' : '‹'}
-</button>
-
-<button
-  className="carousel-arrow carousel-arrow-next"
-  onClick={nextSlide}
-  style={{
-    position: 'absolute',
-    ...(props.vertical
-      ? { bottom: '10px', left: '50%', transform: 'translateX(-50%)' }
-      : { top: '50%', right: '1px', transform: 'translateY(-50%)' }),
-    zIndex: 10,
-    background: 'white', 
-    color: 'black',
-    border: '2px solid white', 
-    boxShadow: '0 2px 6px rgba(0,0,0,0.5)', 
-    borderRadius: '15%',
-    width: '40px',
-    height: '60px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '20px',
-    fontWeight: 'bold',
-    transition: 'transform 0.2s ease-in-out',
-  }}
->
-  {props.vertical ? '˅' : '›'}
-</button>
-
-        </>
-      )}
-
-      {/* Pagination dots */}
-      {props.pagingDotVisible && totalSlides > 1 && (
-        <div
-          className="carousel-dots"
-          style={{
-            position: 'absolute',
-            ...(props.vertical
-              ? { top: '50%', right: '10px', transform: 'translateY(-50%)', bottom: 'auto', left: 'auto' }
-              : { bottom: '15px', left: '0', right: '0' }
-            ),
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexDirection: props.vertical ? 'column' : 'row',
-            gap: '8px',
-            zIndex: 100,
-            padding: props.vertical ? '8px 6px' : '6px 10px',
-          
-            borderRadius: props.vertical ? '12px' : '16px'
-          }}
-        >
-          {Array.from({ length: totalSlides }).map((_, index) => (
-            <button
-              key={index}
-              aria-label={`Go to slide ${index + 1}`}
-              className={`carousel-dot ${index === currentSlide ? 'active' : ''}`}
-              onClick={() => goToSlide(index)}
-              style={{
-                width: index === currentSlide ? '12px' : '10px',
-                height: index === currentSlide ? '12px' : '10px',
-                borderRadius: '50%',
-                border: 'none',
-                background: index === currentSlide ? '#000' : '#ccc',
-                cursor: 'pointer',
-                transition: 'all 200ms ease'
-              }}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default CarouselComponent;
+import React, { useState, useEffect, useCallback } from 'react';
+import { Linodeurl } from '../../const';
+
+// Types for the carousel props
+interface Slide {
+  sl_id: string;
+  name: string;
+  sl_type: string;
+  image: {
+    isDynamic: boolean;
+    url: string;
+    alt: string;
+    width: number | null;
+    height: number | null;
+  };
+  video?: {
+    url?: string;
+    alt?: string;
+  };
+  link_type: string; // NONE | EXTERNALLINK | PRODUCT | TAG | PAGE
+  product: any;
+  tag: any;
+  page: any;
+  external_link: {
+    url: string;
+    target: string;
+  } | null;
+}
+
+interface SlideMode {
+  web: {
+    slidesToShow: number;
+  };
+  mobileweb: {
+    slidesToShow: number;
+  };
+  mobileapp: {
+    slidesToShow: number;
+  };
+  tablet: {
+    slidesToShow: number;
+  };
+}
+
+interface SlidesData {
+  all: Slide[];
+  mode: SlideMode;
+}
+
+export interface CarouselProps {
+  name: string;
+  code: string;
+  scrollMode: string;
+  autoplay: boolean;
+  autoplayInterval: number;
+  pauseOnHover: boolean;
+  speed: number;
+  height: string;
+  vertical: boolean;
+  sliderArrowVisible: boolean;
+  pagingDotVisible: boolean;
+  objectFit: string;
+  slides: SlidesData[] | Slide[][]; // Support both formats: SlidesData[] or nested array Slide[][]
+}
+
+interface CarouselComponentMainProps {
+  props: CarouselProps;
+  deviceMode?: string;
+}
+
+const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
+  props,
+  deviceMode = 'web'
+}) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(props.autoplay);
+  const [isHovered, setIsHovered] = useState(false);
+  const [prevButtonHovered, setPrevButtonHovered] = useState(false);
+  const [nextButtonHovered, setNextButtonHovered] = useState(false);
+  
+  // Detect data structure and safely get slides with fallback
+  // Check if slides[0] is an array of Slide objects (new format) or has 'all' property (old format)
+  const firstSlideItem = props.slides && props.slides[0] ? props.slides[0] : null;
+  
+  // Check if it's the new nested array format (array of Slide objects)
+  const isNestedArrayFormat = Array.isArray(firstSlideItem) && 
+                               firstSlideItem.length > 0 && 
+                               typeof firstSlideItem[0] === 'object' &&
+                               'sl_id' in (firstSlideItem[0] as any);
+  
+  let slides: Slide[] = [];
+  let slidesData: SlidesData | null = null;
+  
+  if (isNestedArrayFormat) {
+    // New format: slides is Slide[][] - first element is an array of Slide objects
+    slides = (firstSlideItem as Slide[]) || [];
+  } else if (firstSlideItem && typeof firstSlideItem === 'object' && 'all' in firstSlideItem) {
+    // Old format: slides is SlidesData[] - has 'all' property
+    slidesData = firstSlideItem as SlidesData;
+    slides = slidesData?.all || [];
+  } else {
+    // Fallback: empty array
+    slides = [];
+  }
+  
+  const totalSlides = slides.length;
+
+  // Get current mode settings
+  const getCurrentMode = () => {
+    // If using nested array format, mode data doesn't exist, use defaults
+    if (isNestedArrayFormat || !slidesData || !slidesData.mode) {
+      // Return default mode based on device
+      const defaultSlidesToShow = deviceMode === 'mobileweb' || deviceMode === 'mobileapp' ? 1 : 
+                                  deviceMode === 'tablet' ? 2 : 1;
+      return { slidesToShow: defaultSlidesToShow };
+    }
+    
+    switch(deviceMode) {
+      case 'mobileweb':
+        return slidesData.mode.mobileweb || { slidesToShow: 1 };
+      case 'mobileapp':
+        return slidesData.mode.mobileapp || { slidesToShow: 1 };
+      case 'tablet':
+        return slidesData.mode.tablet || { slidesToShow: 1 };
+      case 'web':
+      default:
+        return slidesData.mode.web || { slidesToShow: 1 };
+    }
+  };
+
+  const currentMode = getCurrentMode();
+  const slidesToShow = Math.max(1, currentMode.slidesToShow || 1);
+
+  // Function to go to next slide (advance by 1 to support wrap pairs)
+  const nextSlide = useCallback(() => {
+    setCurrentSlide((prev) => (prev + 1) % totalSlides);
+  }, [totalSlides]);
+
+  // Function to go to previous slide
+  const prevSlide = useCallback(() => {
+    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
+  }, [totalSlides]);
+
+  // Function to go to specific slide start index
+  const goToSlide = (index: number) => {
+    setCurrentSlide(index % totalSlides);
+  };
+
+  // Handle autoplay
+  useEffect(() => {
+    // Only pause on hover if pauseOnHover is enabled
+    const shouldPause = props.pauseOnHover && isHovered;
+    if (!props.autoplay || !isPlaying || shouldPause) return;
+
+    const interval = setInterval(() => {
+      nextSlide();
+    }, props.autoplayInterval);
+
+    return () => clearInterval(interval);
+  }, [props.autoplay, props.autoplayInterval, props.pauseOnHover, isPlaying, isHovered, nextSlide]);
+
+  // Handle pause on hover
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    if (props.pauseOnHover) {
+      setIsPlaying(false);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    if (props.pauseOnHover) {
+      setIsPlaying(true);
+    }
+  };
+
+  const resolveAssetUrl = (url?: string) => {
+    if (!url) return '';
+    if (url.startsWith('http://') || url.startsWith('https://')) return url;
+    return `${Linodeurl}${url}`;
+  };
+
+  const buildLinkForSlide = (slide: Slide) => {
+    console.warn(slide);
+    switch (slide.link_type) {
+      case 'NONE':
+        return null;
+      case 'EXTERNALLINK':
+        return `${slide.external_link?.url || ''}`;
+      case 'PRODUCT': {
+        const product: any = slide.product || {};
+        const pdType = product?.pd_type || product?.product_type;
+        const code = product?.code || '';
+        if (!code) return null;
+
+        return pdType === 'VARIANT'
+          ? `/${code}`
+          : `/model/${code}`;
+      }
+      case 'TAG': {
+        const tag: any = slide.tag || {};
+        if (!tag.code) return null;
+        return `/tag/${tag?.code}`;
+      }
+      case 'PAGE': {
+        const page: any = slide.page || {};
+        const pageId = page._id;
+        const pgType = page.page_type;
+        return `/page/${pageId}?type=${pgType}`;
+      }
+      default:
+        return null;
+    }
+  };
+
+  const handleSlideClick = (slide: Slide) => {
+    const link = buildLinkForSlide(slide);
+    if (link === null) {
+      // If no link, navigate to next slide
+      nextSlide();
+      return;
+    }
+    if (typeof link === 'string') {
+      if (link.startsWith('http')) {
+        window.open(link, slide.external_link?.target || '_blank');
+      } else {
+        window.location.href = link;
+      }
+      return;
+    }
+  };
+
+  // Calculate which group the current slide belongs to
+  const getCurrentGroupIndex = () => {
+    return Math.floor(currentSlide / slidesToShow);
+  };
+
+  // Calculate total number of groups needed
+  const getTotalGroups = () => {
+    return Math.ceil(totalSlides / slidesToShow);
+  };
+
+  // Calculate transform offset for slide animation
+  // Transform based on group index, not slide index
+  const calculateTransform = () => {
+    const groupIndex = getCurrentGroupIndex();
+    if (props.vertical) {
+      // Vertical sliding: moves up and down
+      return `translateY(-${groupIndex * 100}%)`;
+    } else {
+      // Horizontal sliding: moves left and right
+      return `translateX(-${groupIndex * 100}%)`;
+    }
+  };
+
+  return (
+    <div 
+      className="carousel-container"
+      style={{
+        position: 'relative',
+        height: props.height,
+        overflow: 'hidden',
+        width: '100%'
+      }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Slides container */}
+      {totalSlides > 0 ? (
+        <div
+          className="carousel-slides"
+          style={{
+            display: 'flex',
+            height: '100%',
+            width: '100%',
+            // vertical = true: slides move up/down (column direction)
+            // vertical = false: slides move left/right (row direction)
+            flexDirection: props.vertical ? 'column' : 'row',
+            transition: `transform ${props.speed}ms ease-in-out`,
+            transform: calculateTransform(),
+            willChange: 'transform'
+          }}
+        >
+          {Array.from({ length: getTotalGroups() }).map((_, groupIndex) => {
+            // Calculate starting slide index for this group
+            const startIndex = groupIndex * slidesToShow;
+            // Calculate how many slides are in this group (last group may have fewer)
+            const slidesInGroup = Math.min(slidesToShow, totalSlides - startIndex);
+            
+            return (
+              <div
+                key={groupIndex}
+                className="carousel-group"
+                style={{
+                  flexShrink: 0,
+                  display: 'flex',
+                  // Items within each slide are ALWAYS in a horizontal row
+                  flexDirection: 'row',
+                  width: '100%',
+                  height: '100%',
+                  gap: '0px'
+                }}
+              >
+                {Array.from({ length: slidesToShow }).map((_, offset) => {
+                  const slideIndex = startIndex + offset;
+                  
+                  // If this position is beyond available slides, render empty space
+                  if (slideIndex >= totalSlides) {
+                    return (
+                      <div
+                        key={`empty-${offset}`}
+                        className="carousel-slide-empty"
+                        style={{
+                          flexShrink: 0,
+                          width: `${100 / slidesToShow}%`,
+                          height: '100%',
+                          // Empty space, no content
+                        }}
+                      />
+                    );
+                  }
+                  
+                  const slide = slides[slideIndex];
+                  
+                  return (
+                    <div
+                      key={`${slide.sl_id}-${offset}`}
+                      className="carousel-slide"
+                      style={{
+                        flexShrink: 0,
+                        // Items always take equal width in horizontal row
+                        width: `${100 / slidesToShow}%`,
+                        height: '100%',
+                        overflow: 'hidden',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        position: 'relative',
+                        cursor: 'pointer'
+                      }}
+                      onClick={() => handleSlideClick(slide)}
+                    >
+                      {slide.sl_type === 'video' ? (
+                        <video
+                          src={resolveAssetUrl(slide.video?.url)}
+                          style={{ 
+                            width: '100%', 
+                            height: '100%', 
+                            objectFit: props.objectFit as any,
+                            display: 'block',
+                            pointerEvents: 'none'
+                          }}
+                          autoPlay={props.autoplay}
+                          muted
+                          loop
+                          controls={!props.autoplay}
+                        />
+                      ) : (
+                        <img
+                          src={resolveAssetUrl(slide.image?.url)}
+                          alt={slide.image?.alt || ''}
+                          style={{ 
+                            width: '100%', 
+                            height: '100%', 
+                            objectFit: props.objectFit as any,
+                            display: 'block',
+                            pointerEvents: 'none'
+                          }}
+                        />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#999' }}>
+          No slides added yet
+        </div>
+      )}
+
+      {/* Navigation arrows */}
+      {props.sliderArrowVisible && totalSlides > slidesToShow && (
+        <>
+          <button
+            onClick={prevSlide}
+            onMouseEnter={() => setPrevButtonHovered(true)}
+            onMouseLeave={() => setPrevButtonHovered(false)}
+            style={{
+              position: 'absolute',
+              ...(props.vertical
+                ? { top: '8px', right: '16px' }
+                : { left: '8px', top: '50%', transform: 'translateY(-50%)' }
+              ),
+              background: prevButtonHovered ? 'rgba(255, 255, 255, 0.5)' : 'transparent',
+              transition: 'all 0.2s ease',
+              padding: '8px',
+              borderRadius: '4px',
+              boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+              zIndex: 10,
+              border: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            {props.vertical ? (
+              <span style={{ color: '#374151', fontSize: '16px', fontWeight: 'bold' }}>^</span>
+            ) : (
+              <span style={{ color: '#374151', fontSize: '20px', fontWeight: 'bold' }}>&lt;</span>
+            )}
+          </button>
+          <button
+            onClick={nextSlide}
+            onMouseEnter={() => setNextButtonHovered(true)}
+            onMouseLeave={() => setNextButtonHovered(false)}
+            style={{
+              position: 'absolute',
+              ...(props.vertical
+                ? { bottom: '8px', right: '16px' }
+                : { right: '8px', top: '50%', transform: 'translateY(-50%)' }
+              ),
+              background: nextButtonHovered ? 'rgba(255, 255, 255, 0.5)' : 'transparent',
+              transition: 'all 0.2s ease',
+              padding: '8px',
+              borderRadius: '4px',
+              boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+              zIndex: 10,
+              border: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            {props.vertical ? (
+              <span style={{ color: '#374151', fontSize: '16px', fontWeight: 'bold' }}>v</span>
+            ) : (
+              <span style={{ color: '#374151', fontSize: '20px', fontWeight: 'bold' }}>&gt;</span>
+            )}
+          </button>
+        </>
+      )}
+
+      {/* Pagination dots */}
+      {props.pagingDotVisible && getTotalGroups() > 1 && (
+        <div
+          className="carousel-dots"
+          style={{
+            position: 'absolute',
+            ...(props.vertical
+              ? { top: '50%', right: '16px', transform: 'translateY(-50%)' }
+              : { bottom: '16px', left: '50%', transform: 'translateX(-50%)' }
+            ),
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: props.vertical ? 'column' : 'row',
+            gap: '8px',
+            zIndex: 100
+          }}
+        >
+          {Array.from({ length: getTotalGroups() }).map((_, groupIndex) => {
+            const currentGroupIndex = getCurrentGroupIndex();
+            // Navigate to the first slide of the selected group
+            const goToGroup = () => {
+              const firstSlideInGroup = groupIndex * slidesToShow;
+              goToSlide(firstSlideInGroup);
+            };
+            
+            return (
+              <button
+                key={groupIndex}
+                aria-label={`Go to group ${groupIndex + 1}`}
+                onClick={goToGroup}
+                style={{
+                  width: currentGroupIndex === groupIndex ? '12px' : '10px',
+                  height: currentGroupIndex === groupIndex ? '12px' : '10px',
+                  borderRadius: '50%',
+                  border: 'none',
+                  background: currentGroupIndex === groupIndex ? '#000' : '#ccc',
+                  cursor: 'pointer',
+                  transition: 'all 200ms ease'
+                }}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CarouselComponent;