tee3apps-cms-sdk-react 0.0.20 → 0.0.23

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

@@ -178,6 +178,13 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
 		return `${Linodeurl}${url}`;
 	};
 
+	const getCategoryName = (name: any): string => {
+		if (!name) return '';
+		if (typeof name === 'string') return name;
+		if (typeof name === 'object' && name.all) return name.all;
+		return String(name);
+	};
+
 	const buildCategoryHref = (item: CategoryItem): string | null => {
         if (item.pages && item.pages.length > 0) {
             const firstPage = item.pages[0];
@@ -196,7 +203,7 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
         const href = buildCategoryHref(item);
         const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) =>
             href ? (
-                <a href={href} style={{ textDecoration: 'none', color: 'inherit' }}>
+                <a href={href} style={{ textDecoration: 'none', color: 'inherit', height: '100%', display: 'block' }}>
                     {children}
                 </a>
             ) : (
@@ -207,8 +214,7 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
                 <div
                     className="categoryCard"
                     style={{
-                        height:'100%',
-
+                        height: '100%',
                         borderRadius: '8px',
                         overflow: 'hidden',
                         border: '1px solid #eee',
@@ -216,7 +222,7 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
-                        justifyContent: 'center',
+                        justifyContent: 'flex-start',
                         padding: large ? '16px' : '12px',
                         boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                         transition: 'transform 0.2s ease',
@@ -244,7 +250,7 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
                         >
                             <img
                                 src={getImageUrl(item.image.url)}
-                                alt={item.image.alt || item.name?.all || ''}
+                                alt={item.image.alt || getCategoryName(item.name) || ''}
                                 style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                             />
                         </div>
@@ -265,7 +271,7 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
                                 WebkitBoxOrient: 'vertical',
                             }}
                         >
-                            {item.name}
+                            {getCategoryName(item.name)}
                         </div>
                     )}
                 </div>
@@ -282,10 +288,12 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
 				borderRadius: '0px',
 				minHeight: '100px',
 				position: 'relative',
-				overflow: 'hidden',
+				overflow: 'visible',
 				marginBottom: '20px',
 				marginTop: '0px',
-				height:'100%'
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%'
 			}}
 			className='GroupCategoryComponent'
 		>
@@ -366,23 +374,23 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
 				style={{
 					display: currentLayout === 'NONE' ? 'flex' : 'block',
 					overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
+					overflowY: currentLayout === 'NONE' ? 'hidden' : 'visible',
+					alignItems: currentLayout === 'NONE' ? 'stretch' : undefined,
 					gap: currentLayout === 'NONE' ? '12px' : '0',
 					padding: '12px',
 					scrollBehavior: 'smooth',
 					backgroundColor: props.carouselBackground || '#fff',
-					scrollbarWidth: 'thin',
 					borderRadius: '8px',
 					position: 'relative',
-					scrollbarColor: '#c1c1c1 transparent'
-					,				height:'100%'
-
+					flex: 1,
+					minHeight: 0,
 				}}
 				className="groupCategoryCarousel"
 			>
 				{categories.length > 0 ? (
 					currentLayout === 'NONE' ? (
 						categories.map((category) => (
-							<div key={category.code} style={{ minWidth: '150px' ,height:'30%'}}>
+							<div key={category.code} style={{ minWidth: '150px', width: '150px', flexShrink: 0, display: 'flex', flexDirection: 'column', height: '100%' }}>
 								<Card item={category} />
 							</div>
 						))