tee3apps-cms-sdk-react 0.0.19 → 0.0.22

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

@@ -1,391 +1,397 @@
-import React from 'react'
-import { Linodeurl } from '../../const';
-
-interface PageImage {
-	shapeImageId: string;
-	shape: string;
-	isDynamic: string;
-	url: string;
-	width: number;
-	height: number;
-  }
-  
-  interface PageId {
-	_id: string;
-	name: string;
-	code: string;
-	image: PageImage;
-	isActive: boolean;
-  }
-  
-  interface Channel {
-	_id: string;
-	name: string;
-	code: string;
-	isActive: boolean;
-  }
-  
-  interface PageDataItem {
-	page_id: any;
-	channel: Channel;
-  }
-interface BrandImage {
-	shapeImageId: string;
-	shape: string;
-	isDynamic: boolean | string;
-	url: string;
-	width?: number;
-	height?: number;
-	alt?: string;
-}
-
-interface BrandItem {
-	_id?: string;
-	code: string;
-	name: any;
-	image: BrandImage;
-	page?: string;
-	pages?: PageDataItem[];
-}
-
-interface GroupBrandStatic {
-	_id: string;
-	code: string;
-	name: string;
-}
-
-interface GroupBrandDynamic {
-	code: string;
-	name: { all: string };
-	list: BrandItem[];
-	isActive?: boolean;
-}
-
-interface GroupBrandData {
-	static: GroupBrandStatic;
-	dynamic: GroupBrandDynamic;
-	showItems:BrandItem[];
-}
-
-interface HeaderTextStyle {
-	fontSize: number;
-	fontColor: string;
-	isBold: boolean;
-	isItalic: boolean;
-	isUnderline: boolean;
-}
-
-interface DeviceBooleanProps {
-	web: boolean;
-	mobileweb: boolean;
-	mobileapp: boolean;
-	tablet: boolean;
-}
-
-interface DeviceLayoutProps {
-	web: string;
-	mobileweb: string;
-	mobileapp: string;
-	tablet: string;
-}
-
-export interface GroupBrandComponentProps {
-	headerText: any;
-	type: string;
-	groupbrand: GroupBrandData;
-	showItems?:BrandItem[];
-	selectedBrands?: BrandItem[];
-	items?: BrandItem[];
-	cardColor: string;
-	showProductName: DeviceBooleanProps;
-	headerTextStyle: HeaderTextStyle;
-	layout: DeviceLayoutProps;
-	style: DeviceLayoutProps;
-	showHeader: DeviceBooleanProps;
-	isHorizontalScroll: DeviceBooleanProps;
-	headerBackground: string;
-}
-
-interface GroupBrandComponentMainProps {
-	props: GroupBrandComponentProps;
-	deviceMode?: string;
-}
-
-const GroupBrandComponent: React.FC<GroupBrandComponentMainProps> = ({ props, deviceMode = 'web' }) => {
-	const getCurrentBooleanProp = (prop?: DeviceBooleanProps) => {
-		if (!prop) return false;
-		switch (deviceMode) {
-			case 'mobileweb': return !!prop.mobileweb;
-			case 'mobileapp': return !!prop.mobileapp;
-			case 'tablet': return !!prop.tablet;
-			case 'web':
-			default: return !!prop.web;
-		}
-	};
-
-	const getCurrentLayout = () => {
-		// Safely fall back to web, then to 'NONE' if the specific layout is missing
-		if (!props.layout) return 'NONE';
-		switch (deviceMode) {
-			case 'mobileweb': return props.layout.mobileweb  || 'NONE';
-			case 'mobileapp': return props.layout.mobileapp  || 'NONE';
-			case 'tablet': return props.layout.tablet  || 'NONE';
-			case 'web':
-			default: return props.layout.web || 'NONE';
-		}
-	};
-
-	
-
-	const showHeader = getCurrentBooleanProp(props.showHeader);
-	const showBrandName = getCurrentBooleanProp(props.showProductName);
-	const isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
-	const currentLayout = getCurrentLayout();
-	const currentStyle = 'NONE'
-
-	const getBrands = (): BrandItem[] => {
-		if (props.groupbrand?.showItems) {
-			// if (props.items && props.items.length) return props.items;
-			if (props.groupbrand?.showItems?.length) return props.groupbrand?.showItems;
-		}
-		// if (props.selectedBrands && props.selectedBrands.length) return props.selectedBrands;
-		return [];
-	};
-
-	const brands = getBrands();
-
-	// Carousel navigation buttons (layout NONE)
-	const scrollLeft = () => {
-		const carousel = document.querySelector('.groupBrandCarousel');
-		if (carousel) {
-			(carousel as HTMLElement).scrollBy({ left: -200, behavior: 'smooth' });
-		}
-	};
-
-	const scrollRight = () => {
-		const carousel = document.querySelector('.groupBrandCarousel');
-		if (carousel) {
-			(carousel as HTMLElement).scrollBy({ left: 200, behavior: 'smooth' });
-		}
-	};
-
-	const getImageUrl = (url: string) => {
-		if (!url) return '';
-		if (url.startsWith('http://') || url.startsWith('https://')) return url;
-		return `${Linodeurl}${url}`;
-	};
-
-	const buildBrandHref = (item: BrandItem): string | null => {
-		console.log(item);
-		
-		// Check if item has pages and at least one page exists
-		if (item.pages && item.pages.length > 0) {
-			const firstPage = item.pages[0];
-			
-			// Check if the page is active
-				console.log(firstPage.page_id?._id);
-				// If page is active, use the brand page format
-				return `/page/${encodeURIComponent(firstPage.page_id)}`;
-			
-		}
-		
-		// Fallback if no pages exist
-		return null;
-	};
-
-	const Card = ({ item, large = false }: { item: BrandItem; large?: boolean }) => (
-		<a
-			href={buildBrandHref(item)|| undefined}
-			style={{ textDecoration: 'none', color: 'inherit' }}
-		>
-			<div
-				className="brandCard"
-				style={{
-					height: 'auto',
-					borderRadius: '8px',
-					overflow: 'hidden',
-					border: '1px solid #eee',
-					backgroundColor: '#fff',
-					display: 'flex',
-					flexDirection: 'column',
-					alignItems: 'center',
-					justifyContent: 'center',
-					padding: large ? '16px' : '12px',
-					boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-					transition: 'transform 0.2s ease',
-					cursor: 'pointer'
-				}}
-				onMouseOver={(e) => {
-					(e.currentTarget as HTMLDivElement).style.transform = 'translateY(-2px)';
-					(e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
-				}}
-				onMouseOut={(e) => {
-					(e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)';
-					(e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
-				}}
-			>
-				<div style={{ height: large ? '160px' : '120px', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: large ? '12px' : '8px' }}>
-					<img src={getImageUrl(item.image.url)} alt={item.image.alt || ''} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
-				</div>
-				{showBrandName && (
-					<div style={{ textAlign: 'center', fontSize: large ? '16px' : '14px', fontWeight: large ? 600 as any : 500 as any, color: '#333', lineHeight: '1.4', height: large ? 'auto' : '40px', overflow: 'hidden', display: large ? 'block' : '-webkit-box', WebkitLineClamp: large ? undefined as any : 2, WebkitBoxOrient: 'vertical' as any }}>
-						{item.name}
-					</div>
-				)}
-			</div>
-		</a>
-	);
-
-	return (
-		<div
-			style={{
-				border: '1px solid #e1e1e1',
-				width: '100%',
-				maxWidth: '100%',
-				borderRadius: '0px',
-				minHeight: '100px',
-				position: 'relative',
-				overflow: 'hidden',
-				marginBottom: '20px',
-				marginTop: '0px'
-			}}
-			className='GroupBrandComponent'
-		>
-			{showHeader && (
-				<div
-					className="groupBrandHeader"
-					style={{
-						backgroundColor: props.headerBackground,
-						padding: '12px 16px',
-						borderRadius: '0px',
-						marginBottom: '4px',
-						display: 'flex',
-						alignItems: 'center',
-						justifyContent: 'space-between',
-						flexWrap: 'wrap',
-						gap: '12px',
-					}}
-				>
-					<p style={{
-						color: props.headerTextStyle.fontColor,
-						fontSize: `${props.headerTextStyle.fontSize}px`,
-						fontWeight: props.headerTextStyle.isBold ? 'bold' : 'normal',
-						fontStyle: props.headerTextStyle.isItalic ? 'italic' : 'normal',
-						textDecoration: props.headerTextStyle.isUnderline ? 'underline' : 'none',
-						margin: 0
-					}}>
-						{props.headerText || 'Brands'}
-					</p>
-
-					{currentLayout === 'NONE' && brands.length > 0 && (
-						<div style={{ display: 'flex', gap: '8px' }}>
-							<button
-								onClick={scrollLeft}
-								style={{
-									width: '32px',
-									height: '32px',
-									borderRadius: '50%',
-									border: '1px solid #ddd',
-									backgroundColor: '#fff',
-									cursor: 'pointer',
-									display: 'flex',
-									alignItems: 'center',
-									justifyContent: 'center',
-									fontSize: '16px',
-									fontWeight: 'bold'
-								}}
-								onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
-								onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
-							>
-								‹
-							</button>
-							<button
-								onClick={scrollRight}
-								style={{
-									width: '32px',
-									height: '32px',
-									borderRadius: '50%',
-									border: '1px solid #ddd',
-									backgroundColor: '#fff',
-									cursor: 'pointer',
-									display: 'flex',
-									alignItems: 'center',
-									justifyContent: 'center',
-									fontSize: '16px',
-									fontWeight: 'bold'
-								}}
-								onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
-								onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
-							>
-								›
-							</button>
-						</div>
-					)}
-				</div>
-			)}
-
-			<div
-				style={{
-					display: currentLayout === 'NONE' ? 'flex' : 'block',
-					overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
-					gap: currentLayout === 'NONE' ? '12px' : '0',
-					padding: '12px',
-					scrollBehavior: 'smooth',
-					backgroundColor: props.cardColor || '#fff',
-					scrollbarWidth: 'thin',
-					borderRadius: '8px',
-					position: 'relative',
-					scrollbarColor: '#c1c1c1 transparent'
-				}}
-				className="groupBrandCarousel"
-			>
-				{brands.length > 0 ? (
-					currentLayout === 'NONE' ? (
-						brands.map((brand) => (
-							currentStyle === 'NONE' ? (
-								<div key={brand.code} style={{ minWidth: '150px' }}>
-									<Card item={brand} />
-								</div>
-							) : (
-								<div key={brand.code} style={{ minWidth: '150px' }}>
-									<Card item={brand} />
-								</div>
-							)
-						))
-					) : currentLayout === 'SMALL' ? (
-						<div style={{ display: 'grid',   gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', padding: '8px' }}>
-							{brands.map((brand) => (
-								<Card key={brand.code} item={brand} />
-							))}
-						</div>
-					) : currentLayout === 'MEDIUM' ? (
-						<div style={{ display: 'grid',   gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', padding: '8px' }}>
-							{brands.map((brand) => (
-								<Card key={brand.code} item={brand} />
-							))}
-						</div>
-					) : currentLayout === 'MEDIUM_THREE' ? (
-						<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
-							{brands.length > 0 && (
-								<Card item={brands[0]} large />
-							)}
-							{brands.length > 1 && (
-								<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
-									{brands.slice(1).map((brand) => (
-										<Card key={brand.code} item={brand} />
-									))}
-								</div>
-							)}
-						</div>
-					) : null
-				) : (
-					<div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
-						<p>No brands available.</p>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-};
-
+import React from 'react'
+import { Linodeurl } from '../../const';
+
+interface PageImage {
+	shapeImageId: string;
+	shape: string;
+	isDynamic: string;
+	url: string;
+	width: number;
+	height: number;
+  }
+  
+  interface PageId {
+	_id: string;
+	name: string;
+	code: string;
+	image: PageImage;
+	isActive: boolean;
+  }
+  
+  interface Channel {
+	_id: string;
+	name: string;
+	code: string;
+	isActive: boolean;
+  }
+  
+  interface PageDataItem {
+	page_id: any;
+	channel: Channel;
+  }
+interface BrandImage {
+	shapeImageId: string;
+	shape: string;
+	isDynamic: boolean | string;
+	url: string;
+	width?: number;
+	height?: number;
+	alt?: string;
+}
+
+interface BrandItem {
+	_id?: string;
+	code: string;
+	name: any;
+	image: BrandImage;
+	page?: string;
+	pages?: PageDataItem[];
+}
+
+interface GroupBrandStatic {
+	_id: string;
+	code: string;
+	name: string;
+}
+
+interface GroupBrandDynamic {
+	code: string;
+	name: { all: string };
+	list: BrandItem[];
+	isActive?: boolean;
+}
+
+interface GroupBrandData {
+	static: GroupBrandStatic;
+	dynamic: GroupBrandDynamic;
+	showItems:BrandItem[];
+}
+
+interface HeaderTextStyle {
+	fontSize: number;
+	fontColor: string;
+	isBold: boolean;
+	isItalic: boolean;
+	isUnderline: boolean;
+}
+
+interface DeviceBooleanProps {
+	web: boolean;
+	mobileweb: boolean;
+	mobileapp: boolean;
+	tablet: boolean;
+}
+
+interface DeviceLayoutProps {
+	web: string;
+	mobileweb: string;
+	mobileapp: string;
+	tablet: string;
+}
+
+export interface GroupBrandComponentProps {
+	headerText: any;
+	type: string;
+	groupbrand: GroupBrandData;
+	showItems?:BrandItem[];
+	selectedBrands?: BrandItem[];
+	items?: BrandItem[];
+	cardColor: string;
+	showProductName: DeviceBooleanProps;
+	headerTextStyle: HeaderTextStyle;
+	layout: DeviceLayoutProps;
+	style: DeviceLayoutProps;
+	showHeader: DeviceBooleanProps;
+	isHorizontalScroll: DeviceBooleanProps;
+	headerBackground: string;
+}
+
+interface GroupBrandComponentMainProps {
+	props: GroupBrandComponentProps;
+	deviceMode?: string;
+}
+
+const GroupBrandComponent: React.FC<GroupBrandComponentMainProps> = ({ props, deviceMode = 'web' }) => {
+	const getCurrentBooleanProp = (prop?: DeviceBooleanProps) => {
+		if (!prop) return false;
+		switch (deviceMode) {
+			case 'mobileweb': return !!prop.mobileweb;
+			case 'mobileapp': return !!prop.mobileapp;
+			case 'tablet': return !!prop.tablet;
+			case 'web':
+			default: return !!prop.web;
+		}
+	};
+
+	const getCurrentLayout = () => {
+		// Safely fall back to web, then to 'NONE' if the specific layout is missing
+		if (!props.layout) return 'NONE';
+		switch (deviceMode) {
+			case 'mobileweb': return props.layout.mobileweb  || 'NONE';
+			case 'mobileapp': return props.layout.mobileapp  || 'NONE';
+			case 'tablet': return props.layout.tablet  || 'NONE';
+			case 'web':
+			default: return props.layout.web || 'NONE';
+		}
+	};
+
+	
+
+	const showHeader = getCurrentBooleanProp(props.showHeader);
+	const showBrandName = getCurrentBooleanProp(props.showProductName);
+	const isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
+	const currentLayout = getCurrentLayout();
+	const currentStyle = 'NONE'
+
+	const getBrands = (): BrandItem[] => {
+		if (props.groupbrand?.showItems) {
+			// if (props.items && props.items.length) return props.items;
+			if (props.groupbrand?.showItems?.length) return props.groupbrand?.showItems;
+		}
+		// if (props.selectedBrands && props.selectedBrands.length) return props.selectedBrands;
+		return [];
+	};
+
+	const brands = getBrands();
+
+	// Carousel navigation buttons (layout NONE)
+	const scrollLeft = () => {
+		const carousel = document.querySelector('.groupBrandCarousel');
+		if (carousel) {
+			(carousel as HTMLElement).scrollBy({ left: -200, behavior: 'smooth' });
+		}
+	};
+
+	const scrollRight = () => {
+		const carousel = document.querySelector('.groupBrandCarousel');
+		if (carousel) {
+			(carousel as HTMLElement).scrollBy({ left: 200, behavior: 'smooth' });
+		}
+	};
+
+	const getImageUrl = (url: string) => {
+		if (!url) return '';
+		if (url.startsWith('http://') || url.startsWith('https://')) return url;
+		return `${Linodeurl}${url}`;
+	};
+
+	const getBrandName = (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 buildBrandHref = (item: BrandItem): string | null => {
+		console.log(item);
+		
+		// Check if item has pages and at least one page exists
+		if (item.pages && item.pages.length > 0) {
+			const firstPage = item.pages[0];
+			
+			// Check if the page is active
+				console.log(firstPage.page_id?._id);
+				// If page is active, use the brand page format
+				return `/page/${encodeURIComponent(firstPage.page_id)}`;
+			
+		}
+		
+		// Fallback if no pages exist
+		return null;
+	};
+
+	const Card = ({ item, large = false }: { item: BrandItem; large?: boolean }) => (
+		<a
+			href={buildBrandHref(item)|| undefined}
+			style={{ textDecoration: 'none', color: 'inherit', height: '100%', display: 'block' }}
+		>
+			<div
+				className="brandCard"
+				style={{
+					height: '100%',
+					borderRadius: '8px',
+					overflow: 'hidden',
+					border: '1px solid #eee',
+					backgroundColor: '#fff',
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					justifyContent: 'flex-start',
+					padding: large ? '16px' : '12px',
+					boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+					transition: 'transform 0.2s ease',
+					cursor: 'pointer'
+				}}
+				onMouseOver={(e) => {
+					(e.currentTarget as HTMLDivElement).style.transform = 'translateY(-2px)';
+					(e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
+				}}
+				onMouseOut={(e) => {
+					(e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)';
+					(e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+				}}
+			>
+				<div style={{ height: large ? '160px' : '120px', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: large ? '12px' : '8px' }}>
+					<img src={getImageUrl(item.image.url)} alt={item.image.alt || getBrandName(item.name) || ''} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+				</div>
+				{showBrandName && (
+					<div style={{ textAlign: 'center', fontSize: large ? '16px' : '14px', fontWeight: large ? 600 as any : 500 as any, color: '#333', lineHeight: '1.4', height: large ? 'auto' : '40px', overflow: 'hidden', display: large ? 'block' : '-webkit-box', WebkitLineClamp: large ? undefined as any : 2, WebkitBoxOrient: 'vertical' as any }}>
+						{getBrandName(item.name)}
+					</div>
+				)}
+			</div>
+		</a>
+	);
+
+	return (
+		<div
+			style={{
+				border: '1px solid #e1e1e1',
+				width: '100%',
+				maxWidth: '100%',
+				borderRadius: '0px',
+				minHeight: '100px',
+				position: 'relative',
+				overflow: 'visible',
+				marginBottom: '20px',
+				marginTop: '0px',
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%'
+			}}
+			className='GroupBrandComponent'
+		>
+			{showHeader && (
+				<div
+					className="groupBrandHeader"
+					style={{
+						backgroundColor: props.headerBackground,
+						padding: '12px 16px',
+						borderRadius: '0px',
+						marginBottom: '4px',
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'space-between',
+						flexWrap: 'wrap',
+						gap: '12px',
+					}}
+				>
+					<p style={{
+						color: props.headerTextStyle.fontColor,
+						fontSize: `${props.headerTextStyle.fontSize}px`,
+						fontWeight: props.headerTextStyle.isBold ? 'bold' : 'normal',
+						fontStyle: props.headerTextStyle.isItalic ? 'italic' : 'normal',
+						textDecoration: props.headerTextStyle.isUnderline ? 'underline' : 'none',
+						margin: 0
+					}}>
+						{props.headerText || 'Brands'}
+					</p>
+
+					{currentLayout === 'NONE' && brands.length > 0 && (
+						<div style={{ display: 'flex', gap: '8px' }}>
+							<button
+								onClick={scrollLeft}
+								style={{
+									width: '32px',
+									height: '32px',
+									borderRadius: '50%',
+									border: '1px solid #ddd',
+									backgroundColor: '#fff',
+									cursor: 'pointer',
+									display: 'flex',
+									alignItems: 'center',
+									justifyContent: 'center',
+									fontSize: '16px',
+									fontWeight: 'bold'
+								}}
+								onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
+								onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
+							>
+								‹
+							</button>
+							<button
+								onClick={scrollRight}
+								style={{
+									width: '32px',
+									height: '32px',
+									borderRadius: '50%',
+									border: '1px solid #ddd',
+									backgroundColor: '#fff',
+									cursor: 'pointer',
+									display: 'flex',
+									alignItems: 'center',
+									justifyContent: 'center',
+									fontSize: '16px',
+									fontWeight: 'bold'
+								}}
+								onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
+								onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
+							>
+								›
+							</button>
+						</div>
+					)}
+				</div>
+			)}
+
+			<div
+				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.cardColor || '#fff',
+					borderRadius: '8px',
+					position: 'relative',
+					flex: 1,
+					minHeight: 0,
+				}}
+				className="groupBrandCarousel"
+			>
+				{brands.length > 0 ? (
+					currentLayout === 'NONE' ? (
+						brands.map((brand) => (
+							<div key={brand.code} style={{ minWidth: '150px', width: '150px', flexShrink: 0, display: 'flex', flexDirection: 'column', height: '100%' }}>
+								<Card item={brand} />
+							</div>
+						))
+					) : currentLayout === 'SMALL' ? (
+						<div style={{ display: 'grid',   gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', padding: '8px' }}>
+							{brands.map((brand) => (
+								<Card key={brand.code} item={brand} />
+							))}
+						</div>
+					) : currentLayout === 'MEDIUM' ? (
+						<div style={{ display: 'grid',   gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', padding: '8px' }}>
+							{brands.map((brand) => (
+								<Card key={brand.code} item={brand} />
+							))}
+						</div>
+					) : currentLayout === 'MEDIUM_THREE' ? (
+						<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
+							{brands.length > 0 && (
+								<Card item={brands[0]} large />
+							)}
+							{brands.length > 1 && (
+								<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+									{brands.slice(1).map((brand) => (
+										<Card key={brand.code} item={brand} />
+									))}
+								</div>
+							)}
+						</div>
+					) : null
+				) : (
+					<div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
+						<p>No brands available.</p>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
 export default GroupBrandComponent