tee3apps-cms-sdk-react 0.0.1

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

@@ -0,0 +1,1169 @@
+import React, { useState, useCallback } from 'react'
+import './tab.css';
+import { Linodeurl } from '../../const';
+interface TabImage {
+	isDynamic: boolean;
+	alt: string;
+	url: string;
+	width: number | null;
+	height: number | null;
+}
+
+interface TabVideo {
+	alt: string;
+	url: string;
+}
+
+interface TabContentImage {
+	image: TabImage;
+	link_type: string;
+	product: any;
+	tag: any;
+	page: any;
+	external_link: any;
+}
+
+interface TabContentVideo {
+	video: TabVideo;
+	link_type: string;
+	product: any;
+	tag: any;
+	page: any;
+	external_link: any;
+}
+
+interface Product {
+	_id: string;
+	code: string;
+	name: string | { all: string };
+	image: any;
+	isActive: boolean;
+	price?: any;
+}
+
+interface TabContentGroup {
+	type: string;
+	groupImageId: string | null;
+	groupProductId: string | null;
+	groupVideoId: string | null;
+	dynamicImages?: any[];
+	dynamicVideos?: any[];
+	dynamicProducts?: any[];
+	showItems?: Product[];
+}
+
+interface TabMode {
+	web: { layout: string };
+	mobileweb: { layout: string };
+	mobileapp: { layout: string };
+	tablet: { layout: string };
+}
+
+interface TabItem {
+	tabHeaderType: string;
+	tabHeaderText: string;
+	tabHeaderImage: TabImage;
+	tabContentType: string;
+	tabContentImage?: TabContentImage;
+	tabContentVideo?: TabContentVideo;
+	tabContentGroupImage: TabContentGroup;
+	tabContentGroupVideo: TabContentGroup;
+	tabContentGroupProduct: TabContentGroup;
+	mode: TabMode;
+}
+
+interface FontStyle {
+	isBold: boolean;
+	isItalic: boolean;
+	isUnderLine: boolean;
+}
+
+interface TitleStyle {
+	titleText: { all: string;[key: string]: string };
+	fontSize: number;
+	fontStyle: FontStyle;
+	fontColor: string;
+	alignment: string;
+}
+
+interface HeaderStyle {
+	fontSize: number;
+	fontStyle: FontStyle;
+	defaultColorBg: string;
+	defaultColorText: string;
+	hoverColorBg: string;
+	hoverColorText: string;
+	activeColorBg: string;
+	activeColorText: string;
+}
+
+interface TabsData {
+	all: TabItem[];
+}
+
+export interface TabComponentProps {
+	name: string;
+	code: string;
+	orientation: 'horizontal' | 'vertical';
+	height: number;
+	showTitle: boolean;
+	title: TitleStyle;
+	header: HeaderStyle;
+	tabs: TabsData[];
+}
+
+interface TabComponentMainProps {
+	props: TabComponentProps;
+	deviceMode?: string;
+}
+
+const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'web' }) => {
+	const [activeTab, setActiveTab] = useState(0);
+	const [carouselIndex, setCarouselIndex] = useState(0);
+
+	const buildLinkForSlide = (slide: any) => {
+    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 getImageUrl = (url: string) => {
+		if (!url) return '';
+		if (url.startsWith('http://') || url.startsWith('https://')) return url;
+		return `${Linodeurl}${url}`;
+	};
+
+	// Inline Product Card Component
+	const ProductCard: React.FC<{ product: any; layout?: string }> = ({ product, layout = '1x1' }) => {
+		const formatPrice = (price: any) => {
+			if (typeof price === 'object' && price.$numberDecimal) {
+				return parseFloat(price.$numberDecimal).toLocaleString('en-IN', {
+					style: 'currency',
+					currency: 'INR',
+					minimumFractionDigits: 0,
+					maximumFractionDigits: 0
+				});
+			}
+			return price;
+		};
+
+		const calculateOffer = (mrp: any, sp: any) => {
+			const mrpValue = parseFloat(mrp.$numberDecimal || mrp);
+			const spValue = parseFloat(sp.$numberDecimal || sp);
+			if (mrpValue > spValue) {
+				const discount = ((mrpValue - spValue) / mrpValue) * 100;
+				return Math.round(discount);
+			}
+			return 0;
+		};
+
+		const renderStars = (rating: number) => {
+			const stars = [];
+			for (let i = 1; i <= 5; i++) {
+				stars.push(
+					<span key={i} className={i <= rating ? 'star' : 'star empty'}>
+						★
+					</span>
+				);
+			}
+			return stars;
+		};
+
+		const formatRating = (rating: number) => {
+			return rating ? `(${rating.toFixed(1)} *)` : '(0.0 *)';
+		};
+
+		const getVariantText = (variant: any) => {
+			return variant.valueId?.name?.all || variant.valueId?.name || '';
+		};
+
+		const mrp = product.price?.MRP;
+		const sp = product.price?.SP;
+		const offer = calculateOffer(mrp, sp);
+
+		const cardMode = layout === '1x1' ? 'carousel-mode' : layout === '2x1' ? 'layout-2x1' : 'grid-mode';	
+		const productSlug = product._id;
+		const productLink = `/${productSlug}`;
+		
+		const cardContent = (
+			<>
+				{/* Product Image */}
+				<div className="product-image-container">
+					<img
+						src={getImageUrl(product.image?.all?.url || product.model?.image?.url)}
+						alt={product.name?.all || product.name?.displayName}
+						className="product-image"
+					/>
+				</div>
+
+				{/* Product Details */}
+				<div className="product-details">
+					<div className="product-header">
+						<div className="product-brand">{product.brand?.name?.all || product.brand?.name}</div>
+						<div className="product-name">{product.name?.all || product.name}</div>
+						<div className="product-code">Code: {product.code}</div>
+					</div>
+
+					{/* Rating - Show first for grid mode */}
+					{layout !== '1x1' && layout !== '2x2' && (
+						<div className="product-rating">
+							<div className="stars">
+								{renderStars(product.starrating || 0)}
+							</div>
+							<span className="rating-text">
+								{formatRating(product.starrating || 0)}
+							</span>
+						</div>
+					)}
+
+					{/* Variants - Only show for carousel mode */}
+					{layout === '1x1' && product.variant && product.variant.length > 0 && (
+						<div className="product-variants">
+							{product.variant.map((variant: any, index: number) => (
+								<span key={index} className="variant-tag">
+									{getVariantText(variant)}
+								</span>
+							))}
+						</div>
+					)}
+{/* {layout === '1x1' && product.variant && product.variant.length > 0 && (
+						<div className="product-variants">
+							{product.variant.map((variant: any, index: number) => (
+								<span key={index} className="variant-tag">
+									{getVariantText(variant)}
+								</span>
+							))}
+						</div>
+					)} */}
+					{/* Pricing */}
+					<div className="product-pricing">
+						<div className="price-row">
+							<span className="current-price">{formatPrice(sp)}</span>
+							{mrp && sp && parseFloat(mrp.$numberDecimal || mrp) > parseFloat(sp.$numberDecimal || sp) && (
+								<>
+									<span className="original-price">{formatPrice(mrp)}</span>
+									{offer > 0 && <span className="offer-badge">{offer}% OFF</span>}
+								</>
+							)}
+						</div>
+					</div>
+
+					{/* Rating - Show for carousel mode */}
+					{layout === '1x1' && (
+						<div className="product-rating">
+							<div className="stars">
+								{renderStars(product.starrating || 0)}
+							</div>
+							<span className="rating-text">
+								({product.startRatingCount || 0} reviews)
+							</span>
+						</div>
+					)}
+
+					
+				</div>
+			</>
+		);
+		
+		return (
+			<div className={`product-card ${cardMode}`}>
+				{layout === '1x1' ? (
+					<a href={productLink} target="_blank" style={{ textDecoration: 'none', color: 'inherit', display: 'contents' }}>
+					{cardContent}
+				</a>
+				) : (
+					<a href={productLink} target="_blank" style={{ textDecoration: 'none', color: 'inherit', display: 'contents' }}>
+						{cardContent}
+					</a>
+				)}
+			</div>
+		);
+	};
+
+	// Carousel navigation functions
+	const nextCarouselItem = useCallback(() => {
+		setCarouselIndex((prev) => (prev + 1));
+	}, []);
+
+	const prevCarouselItem = useCallback(() => {
+		setCarouselIndex((prev) => Math.max(0, prev - 1));
+	}, []);
+
+	const goToCarouselItem = (index: number) => {
+		setCarouselIndex(index);
+	};
+
+	// Reset carousel when switching tabs
+	const handleTabChange = (index: number) => {
+		setActiveTab(index);
+		setCarouselIndex(0);
+	};
+
+	const getCurrentLayout = (tab: TabItem): string => {
+		switch (deviceMode) {
+			case 'mobileweb': return tab.mode.mobileweb.layout;
+			case 'mobileapp': return tab.mode.mobileapp.layout;
+			case 'tablet': return tab.mode.tablet.layout;
+			case 'web':
+			default: return tab.mode.web.layout;
+		}
+	};
+
+	const getTabHeaderStyle = (index: number) => {
+		const isActive = activeTab === index;
+
+		return {
+			backgroundColor: 'transparent',
+			color: isActive ? '#000000' : '#6b7280', // black for active, grey for inactive
+			fontSize: `${props.header.fontSize}px`,
+			fontWeight: props.header.fontStyle.isBold ? 'bold' : '500',
+			fontStyle: props.header.fontStyle.isItalic ? 'italic' : 'normal',
+			textDecoration: props.header.fontStyle.isUnderLine ? 'underline' : 'none',
+			padding: '8px 12px',
+			border: 'none',
+			cursor: 'pointer',
+			transition: 'all 0.3s ease',
+			borderRadius: '0',
+			background: 'none',
+			whiteSpace: 'nowrap' as const,
+		};
+	};
+
+
+	const getTitleStyle = () => {
+		return {
+			fontSize: `${props?.title?.fontSize}px`,
+			fontWeight: props?.title?.fontStyle?.isBold ? 'bold' : '600',
+			fontStyle: props?.title?.fontStyle?.isItalic ? 'italic' : 'normal',
+			textDecoration: props?.title?.fontStyle?.isUnderLine ? 'underline' : 'none',
+			color: props?.title?.fontColor,
+			textAlign: props?.title?.alignment as 'left' | 'center' | 'right',
+			margin: '0',
+			lineHeight: '1.2'
+		};
+	};
+
+	const renderTabContent = (tab: TabItem) => {
+		const layout = getCurrentLayout(tab);
+		console.warn(tab)
+		const getGridColumns = () => {
+			switch (layout) {
+				case '1x1': return '1fr';
+				case '1x2': return 'repeat(2, 1fr)';
+				case '2x1': return '1fr';
+				case '2x2': return 'repeat(2, 1fr)';
+				default: return '1fr';
+			}
+		};
+
+		const getGridRows = () => {
+			switch (layout) {
+				case '1x1': return '1fr';
+				case '1x2': return '1fr';
+				case '2x1': return 'repeat(2, 1fr)';
+				case '2x2': return 'repeat(2, 1fr)';
+				default: return '1fr';
+			}
+		};
+
+		const contentStyle = {
+			display: 'grid',
+			gridTemplateColumns: getGridColumns(),
+			gridTemplateRows: getGridRows(),
+			gap: '3px',
+			height: `${props.height}px`, // force tab content height
+			overflow: 'hidden'
+		  };
+		  
+
+		switch (tab.tabContentType) {
+			case 'IMAGE':
+				if (tab.tabContentImage) {
+				  console.warn(tab.tabContentImage, buildLinkForSlide(tab.tabContentImage));
+					return (
+					<a
+					  href={buildLinkForSlide(tab.tabContentImage) || undefined}
+					  target={
+						tab.tabContentImage.link_type === 'external_link'
+						  ? tab.tabContentImage.external_link?.target
+						  : '_blank'
+					  }
+					>
+					  <div style={contentStyle}>
+						<div className="media-box">
+								<img
+									src={getImageUrl(tab.tabContentImage.image.url)}
+									alt={tab.tabContentImage.image.alt}
+							 className="media-content"
+								/>
+							</div>
+						</div>
+						</a>
+					);
+				}
+				break;
+			case 'VIDEO':
+				if (tab.tabContentVideo) {
+					return (
+						<div style={contentStyle}>
+						  <div className="media-box">
+								<video
+									src={getImageUrl(tab.tabContentVideo.video.url)}
+									controls
+							   className="media-content"
+
+								/>
+							</div>
+						</div>
+					);
+				}
+				break;
+
+					case 'GROUPIMAGE':
+						if (tab.tabContentGroupImage) {
+						  // Handle both DYNAMIC and STATIC types
+						  const images = tab.tabContentGroupImage.type === 'DYNAMIC' 
+							? tab.tabContentGroupImage.dynamicImages 
+							: tab.tabContentGroupImage.showItems;
+							
+						  if (!images || images.length === 0) {
+							return <div>No images available</div>;
+						  }
+					  
+						  // 1x1 layout: carousel display
+						  if (layout === '1x1') {
+							const currentImage = images[carouselIndex] || images[0];
+							const linkUrl = currentImage ? buildLinkForSlide(currentImage) : null;
+					  
+							const imageElement = currentImage ? (
+							  <div className="media-box">
+								<img
+								  src={getImageUrl(
+									tab.tabContentGroupImage.type === 'DYNAMIC' 
+									  ? currentImage.image.url 
+									  : currentImage.attr?.url
+								  )}
+								  alt={
+									tab.tabContentGroupImage.type === 'DYNAMIC' 
+									  ? currentImage.image.alt 
+									  : currentImage.attr?.alt
+								  }
+								   className="media-content"
+								/>
+							  </div>
+							) : null;
+					  
+					return (
+						<div
+							style={{
+								  position: 'relative',
+								  width: '100%',
+								  height: 'auto',
+								  overflow: 'hidden',
+								  display: 'flex',
+								  alignItems: 'center',
+								  justifyContent: 'center',
+								}}
+							  >
+								{linkUrl ? (
+								  <a
+									href={linkUrl}
+									target={
+									  currentImage?.link_type === 'EXTERNALLINK'
+										? currentImage.external_link?.target || '_blank'
+										: '_self'
+									}
+									style={{ width: '100%', height: '100%' }}
+								  >
+									{imageElement}
+								  </a>
+								) : (
+								  imageElement
+								)}
+					  
+								{/* Carousel Navigation */}
+								{images.length > 1 && (
+								  <>
+									{/* Previous Button */}
+									<button
+									  onClick={prevCarouselItem}
+									  disabled={carouselIndex === 0}
+									  style={{
+										position: 'absolute',
+										left: '10px',
+										top: '50%',
+										transform: 'translateY(-50%)',
+										background: 'rgba(0,0,0,0.5)',
+										color: 'white',
+										border: 'none',
+										borderRadius: '50%',
+										width: '40px',
+										height: '40px',
+										cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
+										opacity: carouselIndex === 0 ? 0.5 : 1,
+										display: 'flex',
+										alignItems: 'center',
+										justifyContent: 'center',
+										fontSize: '18px',
+										zIndex: 10,
+									  }}
+									>
+									  ‹
+									</button>
+					  
+									{/* Next Button */}
+									<button
+									  onClick={nextCarouselItem}
+									  disabled={carouselIndex >= images.length - 1}
+									  style={{
+										position: 'absolute',
+										right: '10px',
+										top: '50%',
+										transform: 'translateY(-50%)',
+										background: 'rgba(0,0,0,0.5)',
+										color: 'white',
+										border: 'none',
+										borderRadius: '50%',
+										width: '40px',
+										height: '40px',
+										cursor: carouselIndex >= images.length - 1 ? 'not-allowed' : 'pointer',
+										opacity: carouselIndex >= images.length - 1 ? 0.5 : 1,
+								display: 'flex',
+										alignItems: 'center',
+										justifyContent: 'center',
+										fontSize: '18px',
+										zIndex: 10,
+									  }}
+									>
+									  ›
+									</button>
+					  
+									{/* Dots Indicator */}
+									<div
+									  style={{
+										position: 'absolute',
+										bottom: '10px',
+										left: '50%',
+										transform: 'translateX(-50%)',
+										display: 'flex',
+										gap: '8px',
+										zIndex: 10,
+									  }}
+									>
+									  {images.map((_, index) => (
+										<button
+										  key={index}
+										  onClick={() => goToCarouselItem(index)}
+										  style={{
+											width: index === carouselIndex ? '12px' : '8px',
+											height: index === carouselIndex ? '12px' : '8px',
+											borderRadius: '50%',
+											border: 'none',
+											background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+											cursor: 'pointer',
+											transition: 'all 0.3s ease',
+										  }}
+										/>
+									  ))}
+									</div>
+								  </>
+								)}
+							  </div>
+							);
+						  }
+					  
+						  // Other layouts: grid display with limited images
+						  const getMaxImages = () => {
+							switch (layout) {
+							  case '1x2': return 2;
+							  case '2x1': return 2;
+							  case '2x2': return 4;
+							  default: return images.length;
+							}
+						  };
+						  
+						  const maxImages = getMaxImages();
+						  const displayImages = images.slice(0, maxImages);
+						  
+						  // Create dynamic content style for GROUPIMAGE
+						  const groupImageContentStyle = {
+							display: 'grid',
+							gridTemplateColumns: getGridColumns(),
+							gridTemplateRows: getGridRows(),
+							gap: '3px',
+							height: '100%', // Use auto height for group images
+							overflow: 'hidden'
+						  };
+						  
+						  return (
+							<div style={groupImageContentStyle} className='media-box'>
+							  {displayImages.map((image, index) => {
+								const linkUrl = buildLinkForSlide(image);
+								const imageElement = (
+								  <div key={index} className="media-box">
+									<img
+									  src={getImageUrl(
+										tab.tabContentGroupImage.type === 'DYNAMIC' 
+										  ? image.image.url 
+										  : image.attr?.url
+									  )}
+									  alt={
+										tab.tabContentGroupImage.type === 'DYNAMIC' 
+										  ? image.image.alt 
+										  : image.attr?.alt
+									  }
+									  className="media-content"
+									/>
+								  </div>
+								);
+						  
+								return linkUrl ? (
+								  <a
+									key={index}
+									href={linkUrl}
+									target={
+									  image.link_type === 'EXTERNALLINK'
+										? image.external_link?.target || '_blank'
+										: '_self'
+									}
+									className='media-box'
+								  >
+									{imageElement}
+								  </a>
+								) : (
+								  <div key={index} style={{ width: '100%', height: '100%' }}>
+									{imageElement}
+								  </div>
+								);
+							  })}
+							</div>
+						  );
+						  
+						}
+						break;
+
+						case 'GROUPVIDEO':
+							if (tab.tabContentGroupVideo) {
+							  // Handle both DYNAMIC and STATIC types
+							  const videos = tab.tabContentGroupVideo.type === 'DYNAMIC' 
+								? tab.tabContentGroupVideo.dynamicVideos 
+								: tab.tabContentGroupVideo.showItems;
+								
+							  if (!videos || videos.length === 0) {
+								return <div>No videos available</div>;
+							  }
+						  
+							  // 1x1 layout: carousel display
+							  if (layout === '1x1') {
+								const currentVideo = videos[carouselIndex] || videos[0];
+								const linkUrl = currentVideo ? buildLinkForSlide(currentVideo) : null;
+						  
+								const videoElement = currentVideo ? (
+								  <div className="media-box">
+									<video
+									  src={getImageUrl(
+										tab.tabContentGroupVideo.type === 'DYNAMIC' 
+										  ? currentVideo.video?.url 
+										  : currentVideo.attr?.url
+									  )}
+									  title={
+										tab.tabContentGroupVideo.type === 'DYNAMIC' 
+										  ? currentVideo.video?.alt || currentVideo.name
+										  : currentVideo.attr?.alt 								  }
+									  className="media-content"
+									  controls
+									  style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
+									/>
+								  </div>
+								) : null;
+						  
+								return (
+								  <div
+									style={{
+									  position: 'relative',
+									  width: '100%',
+									  height: 'auto',
+									  overflow: 'hidden',
+									  display: 'flex',
+									  alignItems: 'stretch',
+									  justifyContent: 'center',
+									}}
+								  >
+									{currentVideo && (
+									  <div style={{ width: '100%', height: '100%', display: 'flex' }}>
+										{linkUrl ? (
+										  <a
+											href={linkUrl}
+											target={
+											  currentVideo.link_type === 'EXTERNALLINK'
+												? currentVideo.external_link?.target || '_blank'
+												: '_self'
+											}
+											style={{ textDecoration: 'none', color: 'inherit', display: 'contents' }}
+										  >
+											{videoElement}
+										  </a>
+										) : (
+										  videoElement
+										)}
+									  </div>
+									)}
+						  
+									{/* Carousel Navigation */}
+									{videos.length > 1 && (
+									  <>
+										{/* Prev Button */}
+										<button
+										  onClick={prevCarouselItem}
+										  disabled={carouselIndex === 0}
+										  style={{
+											position: 'absolute',
+											left: '10px',
+											top: '50%',
+											transform: 'translateY(-50%)',
+											background: 'rgba(0,0,0,0.5)',
+											color: 'white',
+											border: 'none',
+											borderRadius: '50%',
+											width: '40px',
+											height: '40px',
+											cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
+											opacity: carouselIndex === 0 ? 0.5 : 1,
+											display: 'flex',
+											alignItems: 'center',
+											justifyContent: 'center',
+											fontSize: '18px',
+											zIndex: 10,
+										  }}
+										>
+										  ‹
+										</button>
+						  
+										{/* Next Button */}
+										<button
+										  onClick={nextCarouselItem}
+										  disabled={carouselIndex >= videos.length - 1}
+										  style={{
+											position: 'absolute',
+											right: '10px',
+											top: '50%',
+											transform: 'translateY(-50%)',
+											background: 'rgba(0,0,0,0.5)',
+											color: 'white',
+											border: 'none',
+											borderRadius: '50%',
+											width: '40px',
+											height: '40px',
+											cursor: carouselIndex >= videos.length - 1 ? 'not-allowed' : 'pointer',
+											opacity: carouselIndex >= videos.length - 1 ? 0.5 : 1,
+											display: 'flex',
+											alignItems: 'center',
+											justifyContent: 'center',
+											fontSize: '18px',
+											zIndex: 10,
+										  }}
+										>
+										  ›
+										</button>
+						  
+										{/* Dots Indicator */}
+										<div
+										  style={{
+											position: 'absolute',
+											bottom: '10px',
+											left: '50%',
+											transform: 'translateX(-50%)',
+											display: 'flex',
+											gap: '8px',
+											zIndex: 10,
+										  }}
+										>
+										  {videos.map((_, index) => (
+											<button
+											  key={index}
+											  onClick={() => goToCarouselItem(index)}
+											  style={{
+												width: index === carouselIndex ? '12px' : '8px',
+												height: index === carouselIndex ? '12px' : '8px',
+												borderRadius: '50%',
+												border: 'none',
+												background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+												cursor: 'pointer',
+												transition: 'all 0.3s ease',
+											  }}
+											/>
+										  ))}
+										</div>
+									  </>
+									)}
+								  </div>
+								);
+						  }
+					  
+						  // Other layouts: grid display with limited videos
+						  const getMaxVideos = () => {
+							switch (layout) {
+							  case '1x2': return 2;
+							  case '2x1': return 2;
+							  case '2x2': return 4;
+							  default: return videos.length;
+							}
+						  };
+						  
+						  const maxVideos = getMaxVideos();
+						  const displayVideos = videos.slice(0, maxVideos);
+						  
+						  // Create dynamic content style for GROUPVIDEO
+						  const groupVideoContentStyle = {
+							display: 'grid',
+							gridTemplateColumns: getGridColumns(),
+							gridTemplateRows: getGridRows(),
+							gap: '3px',
+							height: 'auto', // Use auto height for group videos
+							overflow: 'hidden'
+						  };
+						  
+						  return (
+							<div style={groupVideoContentStyle} className='media-box'>
+							  {displayVideos.map((video, index) => {
+								const linkUrl = buildLinkForSlide(video);
+								
+								const videoElement = (
+								  <div className="media-box">
+									<video
+									  src={getImageUrl(
+										tab.tabContentGroupVideo.type === 'DYNAMIC' 
+										  ? video.video?.url 
+										  : video.attr?.url
+									  )}
+									  title={
+										tab.tabContentGroupVideo.type === 'DYNAMIC' 
+										  ? video.video?.alt || video.name
+										  : video.attr?.alt 
+									  }
+									  className="media-content"
+									  controls
+									  style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
+									/>
+								  </div>
+								);
+						  
+								return linkUrl ? (
+								  <a
+									key={index}
+									href={linkUrl}
+									target={
+									  video.link_type === 'EXTERNALLINK'
+										? video.external_link?.target || '_blank'
+										: '_self'
+									}
+									className='media-box'
+								  >
+									{videoElement}
+								  </a>
+								) : (
+								  <div key={index} style={{ width: '100%', height: '100%' }}>
+									{videoElement}
+								  </div>
+								);
+							  })}
+							</div>
+						  );
+						  
+						}
+						break;
+					  
+						case 'GROUPPRODUCT':
+							if (tab.tabContentGroupProduct && tab.tabContentGroupProduct.showItems) {
+							  const products = tab.tabContentGroupProduct.showItems;
+						  
+							  // 1x1 layout: Carousel view
+							  if (layout === '1x1') {
+								const currentProduct = products[carouselIndex] || products[0];
+						  
+								return (
+								  <div
+									style={{
+									  position: 'relative',
+									  width: '100%',
+									  height: `${props.height}px`, // Full height of tab content
+									  overflow: 'hidden',
+									  display: 'flex',
+									  alignItems: 'stretch',
+									  justifyContent: 'center',
+									}}
+								  >
+									{currentProduct && (
+									  <div style={{ width: '100%', height: '100%', display: 'flex' }}>
+										<ProductCard product={currentProduct} layout={layout} />
+									  </div>
+									)}
+						  
+									{/* Carousel Navigation */}
+									{products.length > 1 && (
+									  <>
+										{/* Prev Button */}
+										<button
+										  onClick={prevCarouselItem}
+										  disabled={carouselIndex === 0}
+										  style={{
+											position: 'absolute',
+											left: '10px',
+											top: '50%',
+											transform: 'translateY(-50%)',
+											background: 'rgba(0,0,0,0.5)',
+											color: 'white',
+											border: 'none',
+											borderRadius: '50%',
+											width: '40px',
+											height: '40px',
+											cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
+											opacity: carouselIndex === 0 ? 0.5 : 1,
+											display: 'flex',
+											alignItems: 'center',
+											justifyContent: 'center',
+											fontSize: '18px',
+											zIndex: 10,
+										  }}
+										>
+										  ‹
+										</button>
+						  
+										{/* Next Button */}
+										<button
+										  onClick={nextCarouselItem}
+										  disabled={carouselIndex >= products.length - 1}
+										  style={{
+											position: 'absolute',
+											right: '10px',
+											top: '50%',
+											transform: 'translateY(-50%)',
+											background: 'rgba(0,0,0,0.5)',
+											color: 'white',
+											border: 'none',
+											borderRadius: '50%',
+											width: '40px',
+											height: '40px',
+											cursor:
+											  carouselIndex >= products.length - 1
+												? 'not-allowed'
+												: 'pointer',
+											opacity: carouselIndex >= products.length - 1 ? 0.5 : 1,
+											display: 'flex',
+											alignItems: 'center',
+											justifyContent: 'center',
+											fontSize: '18px',
+											zIndex: 10,
+										  }}
+										>
+										  ›
+										</button>
+						  
+										{/* Dots */}
+										<div
+										  style={{
+											position: 'absolute',
+											bottom: '10px',
+											left: '50%',
+											transform: 'translateX(-50%)',
+											display: 'flex',
+											gap: '8px',
+											zIndex: 10,
+										  }}
+										>
+										  {products.map((_, index) => (
+											<button
+											  key={index}
+											  onClick={() => goToCarouselItem(index)}
+											  style={{
+												width: index === carouselIndex ? '12px' : '8px',
+												height: index === carouselIndex ? '12px' : '8px',
+												borderRadius: '50%',
+												border: 'none',
+												background:
+												  index === carouselIndex
+													? 'white'
+													: 'rgba(255,255,255,0.5)',
+												cursor: 'pointer',
+												transition: 'all 0.3s ease',
+											  }}
+											/>
+										  ))}
+										</div>
+									  </>
+									)}
+								  </div>
+								);
+							  }
+						  
+							  // Other layouts: Grid view with limited products
+							  const getMaxProducts = () => {
+								switch (layout) {
+								  case '1x2': return 2;
+								  case '2x1': return 2;
+								  case '2x2': return 4;
+								  default: return products.length;
+								}
+							  };
+							  
+							  const maxProducts = getMaxProducts();
+							  const displayProducts = products.slice(0, maxProducts);
+							  
+							  // Create dynamic content style for GROUPPRODUCT
+							  const groupProductContentStyle = {
+								display: 'grid',
+								gridTemplateColumns: getGridColumns(),
+								gridTemplateRows: getGridRows(),
+								gap: '12px',
+								height: 'auto', // Use auto height for group products
+								overflow: 'hidden',
+								padding: '12px',
+								alignItems: 'stretch',
+							  };
+							  
+							  return (
+								<div style={groupProductContentStyle}>
+								  {displayProducts.map((product, index) => (
+									<div
+									  key={index}
+									  style={{
+										width: '100%',
+										height: '100%',
+										display: 'flex',
+										alignItems: 'stretch',
+										justifyContent: 'center',
+										minHeight: '200px',
+									  }}
+									>
+									  <ProductCard product={product} layout={layout} />
+								</div>
+							))}
+						</div>
+					);
+				}
+				break;
+
+			default:
+				return (
+					<div style={{
+						...contentStyle,
+						alignItems: 'center',
+						justifyContent: 'center',
+						backgroundColor: '#f8f9fa',
+						borderRadius: '8px'
+					}}>
+						<p style={{ color: '#6c757d', textAlign: 'center' }}>No content available</p>
+					</div>
+				);
+		}
+
+		return null;
+	};
+
+	const tabs = props.tabs[0]?.all || [];
+
+	return (
+		<div style={{
+			width: '100%',
+			minHeight: `${props.height}px`,
+			backgroundColor: '#ffffff',
+			overflow: 'hidden',
+			boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
+			border: '1px solid #e5e7eb'
+		}}>
+			{/* Header Section */}
+			<div style={{
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'space-between',
+				padding: '20px 32px',
+				backgroundColor: '#ffffff',
+				borderBottom: '1px solid #e5e7eb'
+			}}>
+				{/* Title */}
+				{props.showTitle && (
+					<h1 style={getTitleStyle()}>
+						{props?.title?.titleText?.all}
+					</h1>
+				)}
+
+				{/* Tab Headers */}
+				<div style={{
+					display: 'flex',
+					alignItems: 'center',
+				}}>
+					{tabs.map((tab, index) => (
+						<React.Fragment key={index}>
+							<button
+								style={getTabHeaderStyle(index)}
+								onClick={() => handleTabChange(index)}
+							>
+								{tab.tabHeaderType === 'text' ? (
+									tab.tabHeaderText
+								) : tab.tabHeaderImage.url ? (
+									<img
+										src={getImageUrl(tab.tabHeaderImage.url)}
+										alt={tab.tabHeaderImage.alt}
+										style={{ height: '20px', width: 'auto' }}
+									/>
+								) : (
+									tab.tabHeaderText
+								)}
+							</button>
+
+							{/* Add separator | except after last tab */}
+							{index < tabs.length - 1 && (
+								<span style={{ color: '#9ca3af', margin: '0 4px' }}>|</span>
+							)}
+						</React.Fragment>
+					))}
+				</div>
+
+			</div>
+
+			{/* Tab Content */}
+			<div style={{
+				position: 'relative',
+				height: 'auto'
+			}}>
+				{tabs.length > 0 && tabs[activeTab] && (
+					<div style={{
+						width: '100%',
+						
+					}}>
+						{renderTabContent(tabs[activeTab])}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default TabComponent;