tee3apps-cms-sdk-react 0.0.20 → 0.0.23

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

@@ -387,21 +387,40 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
   };
 
   return (
-    <div
-      style={{
-        border: '1px solid #e1e1e1',
-        width: '100%', 
-        maxWidth: '100%',
-        borderRadius: '0px',
-        minHeight: '100px',
-        position: 'relative',
-        overflow: 'hidden',
-        marginBottom:'20px',
-        marginTop:'0px'
+    <>
+      <style>
+        {`
+          .groupProductCarousel::-webkit-scrollbar {
+            height: 8px;
+          }
+          .groupProductCarousel::-webkit-scrollbar-track {
+            background: #f0f0f0;
+            border-radius: 4px;
+          }
+          .groupProductCarousel::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 4px;
+          }
+          .groupProductCarousel::-webkit-scrollbar-thumb:hover {
+            background: #a1a1a1;
+          }
+        `}
+      </style>
+      <div
+        style={{
+          border: '1px solid #e1e1e1',
+          width: '100%', 
+          maxWidth: '100%',
+          borderRadius: '0px',
+          minHeight: '100px',
+          position: 'relative',
+          overflow: 'hidden',
+          marginBottom:'20px',
+          marginTop:'0px'
    
-      }}
-      className='GroupProductComponent'
-    >
+        }}
+        className='GroupProductComponent'
+      >
       {showHeader && (
         <div
           className="groupProductHeader"
@@ -446,9 +465,9 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
 
           <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
            
-            {/* {props.type=='static' && (
+             {props.type=='static' && (
               <a
-  href={`http://localhost:5173/${props.groupproduct.static.code}/s?type=groupproduct`}
+  href={`/search/${props.groupproduct.static.code}`}
   target="_blank"
   rel="noopener noreferrer"
   style={{
@@ -465,12 +484,12 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
 >
   View All
 </a>
-            )} */}
+            )} 
 
 
           
 
-            {currentLayout === 'NONE'  && products.length > 4 && (
+            {currentLayout === 'NONE'   && (
               <div style={{ display: 'flex', gap: '8px' }}>
                 <button 
                   onClick={scrollLeft} 
@@ -530,7 +549,8 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
         className="groupProductCarousel" 
         style={{
           display: currentLayout === 'NONE' ? 'flex' : 'block',
-          overflowX: currentLayout === 'NONE' && isHorizontalScroll ? 'auto' : 'visible',
+          overflowX: currentLayout === 'NONE' && isHorizontalScroll ? 'scroll' : 'visible',
+          overflowY: 'hidden',
           gap: currentLayout === 'NONE' ? '12px' : '0',
           padding: '12px',
           scrollBehavior: 'smooth',
@@ -538,7 +558,12 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
           scrollbarWidth: 'thin',
           borderRadius: '8px',
           position: 'relative',
-          scrollbarColor: '#c1c1c1 transparent'
+          scrollbarColor: '#c1c1c1 #f0f0f0',
+          width: '100%',
+          ...(currentLayout === 'NONE' && isHorizontalScroll ? {
+            // Webkit scrollbar styles for Chrome/Safari
+            WebkitOverflowScrolling: 'touch',
+          } : {})
         }}
       >
         {products.length > 0 ? (
@@ -603,6 +628,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
         )}
       </div>
     </div>
+    </>
   );
 };