@redneckz/wildless-cms-uni-blocks 0.14.334 → 0.14.335

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.334",
+  "version": "0.14.335",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,21 +1,30 @@
-import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/LinkButton/ArrowButton';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { type ProductGalleryContent, type ProductSlide } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(
+const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-10';
+
+export const ProductGallery = UniBlock<ProductGalleryProps>(
   ({ className = '', padding, slides = [], ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
 
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+      itemCount: slides?.length || 0,
+    });
+
     return (
       <BlockWrapper
         className={style('box-border overflow-hidden', className)}
-        defaultPadding="py-6xl"
+        defaultPadding="pt-6xl"
         padding={padding}
         {...rest}
       >
@@ -36,8 +45,29 @@ export const ProductGallery = JSX<ProductGalleryProps>(
             </div>
           ))}
         </div>
-        <div className="h-28 px-xs mt-m -mb-m flex gap-xs box-border">
-          {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
+
+        <div className="relative pr-xs mt-m -mb-m flex gap-xs box-border">
+          <SwipeListContainer
+            containerRef={containerRef}
+            snapAlign="snap-start"
+            onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+            itemClassName={'h-40 flex items-stretch w-screen'}
+            gap={8}
+          >
+            {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
+          </SwipeListContainer>
+          {scroll.canScrollLeft ? (
+            <ScrollLeftButton
+              className={style('left-6', scrollButtonStyle)}
+              onClick={scroll.scrollLeft}
+            />
+          ) : null}
+          {scroll.canScrollRight ? (
+            <ScrollRightButton
+              className={style('right-6', scrollButtonStyle)}
+              onClick={scroll.scrollRight}
+            />
+          ) : null}
         </div>
       </BlockWrapper>
     );
@@ -55,7 +85,7 @@ const renderNavButton =
     const isActive = i === activeSlideIndex;
     const btnClassName = isActive
       ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
-      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:py-xl backdrop-blur';
+      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
     const btnTitleClassName = isActive
       ? 'text-primary-text text-h6 py-xs'
       : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
@@ -70,7 +100,7 @@ const renderNavButton =
         onClick={() => onClick(i)}
         aria-label={nav?.title}
         className={style(
-          'relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
+          'max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
           btnClassName,
         )}
       >