tee3apps-cms-sdk-react 0.0.20 → 0.0.23

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

@@ -1,669 +1,643 @@
-import React, { useState } from 'react';
-import { Linodeurl } from '../../const';
-interface ImageData {
-  isDynamic: boolean;
-  shape: string;
-  url: string;
-  alt: string;
-  shapeImageId?: string;
-  width?: number;
-  height?: number;
-}
-
-interface ProductData {
-  pd_type: string;
-  pd_id?: {
-    _id: string;
-    code: string;
-    name: {
-      all: string;
-      displayName?: string;
-    };
-    image?: ImageData;
-    isActive: boolean;
-  };
-  product_data?: {
-    _id: string;
-    code: string;
-    name: string;
-  };
-}
-
-
-
-interface LinkData {
-  url: string | null;
-  target: string | null;
-}
-
-interface PageData {
-  page_type: string | null;
-  pg_type?: string | null;
-
-  page_id?: any;
-  page_data?:any;
-}
-
-interface ImageItem {
-  id: number;
-  attr: ImageData;
-  title: string;
-  subTitle: string;
-  linktype: string;
-  product?: ProductData;
-  tag?: any;
-  link?: LinkData;
-  page?: PageData;
-}
-
-interface GroupImageStatic {
-  _id: string;
-  name: string;
-  code: string;
-}
-
-interface GroupImageDynamic {
-  code: string;
-  name: { all: string };
-  list: ImageItem[];
-  isActive?: boolean;
-}
-
-interface GroupImageData {
-  static: GroupImageStatic;
-  dynamic: GroupImageDynamic;
-  groupimagedata: ImageItem[];
-}
-
-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 GroupImageListProps {
-  nameData: any;
-  data?: Array<{ id: string; type: string }>;
-  types?: any[];
-  type: string;
-  groupimage: GroupImageData;
-  headerText: any;
-  activeStatus: boolean;
-  headerImage: string;
-  headerTextStyle: HeaderTextStyle;
-  layout: DeviceLayoutProps;
-  showHeader: DeviceBooleanProps;
-  isHorizontalScroll: DeviceBooleanProps;
-  headerBackground: string;
-  carouselBackground: string;
-  cardcolor: string;
-  showSubtitle?: boolean;
-  showTitle?: boolean;
-  titleStyle?: {
-    fontSize: number;
-    fontColor: string;
-    isBold: boolean;
-    isItalic: boolean;
-    isUnderline: boolean;
-  };
-  subtitleStyle?: {
-    fontSize: number;
-    fontColor: string;
-    isBold: boolean;
-    isItalic: boolean;
-    isUnderline: boolean;
-  };
-  selectedChannel?: string;
-}
-
-interface GroupImageListMainProps {
-  props: GroupImageListProps;
-  deviceMode?: string;
-  boxHeight?: string;
-}
-
-// Image Component Integration
-interface ImageComponentProps {
-  imageData: ImageData;
-  linkData: {
-    linktype: string;
-    product?: ProductData;
-    tag?: any;
-    link?: LinkData;
-    page?: PageData;
-  };
-  borderRadius?: number;
-  height?: string;
-  width?: string;
-}
-
-const ImageComponentInternal: React.FC<ImageComponentProps> = ({
-  imageData,
-  linkData,
-  borderRadius = 8,
-  height = '100%',
-  width = '100%'
-}) => {
-  const getImageUrl = (url: string) => {
-    if (!url) return '';
-    if (url.startsWith('http://') || url.startsWith('https://')) return url;
-    return `${Linodeurl}${url}`;
-  };
-
-  const buildLink = () => {
-    console.warn(linkData)
-    switch (linkData.linktype) {
-      
-      case 'NONE':
-        return null;
-      case 'EXTERNAL_LINK':
-      case 'EXTERNAL':
-        return linkData.link?.url || null;
-      case 'PRODUCT':
-        if (linkData.product?.pd_type === 'VARIANT') {
-          return `/variant/${linkData.product.pd_id?.code || linkData.product.product_data?.code}`;
-        } else {
-          const code = linkData.product?.pd_id?.code || linkData.product?.product_data?.code;
-          return `/model/${code}`;
-        }
-      case 'TAG':
-        return `/tag/${linkData.tag?.tag_id?.code || linkData?.tag?.tag_data?.code}`;
-      case 'PAGE':
-        return `/page/${linkData.page?.page_id?._id  || linkData.page?.page_data?._id  }?type=${linkData.page?.page_type || linkData.page?.pg_type}`;
-      default:
-        return null;
-    }
-  };
-
-  // const handleImageClick = () => {
-    // const link = buildLink();
-    // if (link === null) return;
-    
-    // if (link.startsWith('http')) {
-    //   window.open(link, linkData.link?.target || '_blank');
-    // } else {
-    //   window.location.href = link;
-    // }
-  // };
-
-  const imageStyle: React.CSSProperties = {
-    width: width,
-    height: height,
-    objectFit: 'contain',
-    borderRadius: `${borderRadius}px`,
-    cursor: linkData.linktype !== 'NONE' ? 'pointer' : 'default',
-    transition: 'transform 0.2s ease'
-  };
-
-  return (
-    <a 
-     href={buildLink() ?? undefined}
-  target={
-    linkData?.linktype === 'EXTERNAL'
-      ? (linkData?.link?.target ?? '_blank') 
-      : '_self'}
->
-      <div
-      style={{
-        width: '100%',
-        height: '100%',
-        borderRadius: `${borderRadius}px`,
-        overflow: 'hidden'
-      }}
-      className='media-box'
-    >
-      <img
-      className='media-content'
-        src={getImageUrl(imageData.url)}
-        alt={imageData.alt || ''}
-        style={imageStyle}
-        // onClick={linkData.linktype !== 'NONE' ? handleImageClick : undefined}
-        onMouseOver={(e) => {
-          if (linkData.linktype !== 'NONE') {
-            (e.currentTarget as HTMLImageElement).style.transform = 'scale(1.02)';
-          }
-        }}
-        onMouseOut={(e) => {
-          (e.currentTarget as HTMLImageElement).style.transform = 'scale(1)';
-        }}
-      />
-    </div>
-    </a>
-  );
-};
-
-// Main GroupImageList Component
-const GroupImageList: React.FC<GroupImageListMainProps> = ({ 
-  props, 
-  deviceMode = 'web', 
-  boxHeight 
-}) => {
-  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 = () => {
-    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 isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
-  const currentLayout = getCurrentLayout();
-
-  const getImages = (): ImageItem[] => {
-    if (props.type === 'dynamic') {
-      if (props.groupimage?.dynamic?.list?.length) return props.groupimage.dynamic.list;
-    }
-    if (props.groupimage?.groupimagedata?.length) return props.groupimage.groupimagedata;
-    return [];
-  };
-
-  const images = getImages();
-
-  // Carousel navigation buttons (layout NONE)
-  const scrollLeft = () => {
-    const scrollableContainer = document.querySelector('.scrollable-container');
-    if (scrollableContainer) {
-      (scrollableContainer as HTMLElement).scrollBy({ left: -200, behavior: 'smooth' });
-    }
-  };
-
-  const scrollRight = () => {
-    const scrollableContainer = document.querySelector('.scrollable-container');
-    if (scrollableContainer) {
-      (scrollableContainer as HTMLElement).scrollBy({ left: 200, behavior: 'smooth' });
-    }
-  };
-
-  const ImageCard = ({ item, large = false }: { item: ImageItem; large?: boolean }) => {
-    const [isHovered, setIsHovered] = useState(false);
-    
-    return (
-      <div
-        className="imageCard"
-        style={{
-          height: 'auto',
-          borderRadius: '8px',
-          overflow: 'hidden',
-          border: '1px solid #eee',
-          backgroundColor: props.cardcolor || '#fff',
-          display: 'flex',
-          flexDirection: 'column',
-          padding: large ? '16px' : '12px',
-          boxShadow: isHovered ? '0 4px 8px rgba(0,0,0,0.15)' : '0 2px 4px rgba(0,0,0,0.1)',
-          transition: 'all 0.2s ease',
-          cursor: item.linktype !== 'NONE' ? 'pointer' : 'default',
-          transform: isHovered ? 'translateY(-2px)' : 'translateY(0px)',
-          flex: 1
-        }}
-        onMouseOver={() => setIsHovered(true)}
-        onMouseOut={() => setIsHovered(false)}
-      >
-        <div style={{ width: '100%', marginBottom: large ? '12px' : '8px' }}>
-          <ImageComponentInternal
-            imageData={item.attr}
-            linkData={{
-              linktype: item.linktype,
-              product: item.product,
-              tag: item.tag,
-              link: item.link,
-              page: item.page
-            }}
-            borderRadius={6}
-            height={`${parseInt(boxHeight || '250') - 10}px`}
-          />
-        </div>
-        {(props?.showTitle !== false) && item.title && (
-          <div style={{ 
-            textAlign: 'center', 
-            fontSize: props.titleStyle ? `${props.titleStyle.fontSize}px` : (large ? '16px' : '14px'), 
-            fontWeight: props.titleStyle?.isBold ? 'bold' : (large ? 600 : 500), 
-            color: props.titleStyle?.fontColor || '#333', 
-            fontStyle: props.titleStyle?.isItalic ? 'italic' : 'normal',
-            textDecoration: props.titleStyle?.isUnderline ? 'underline' : 'none',
-            lineHeight: '1.4', 
-            marginBottom: '4px'
-          }}>
-            {item.title}
-          </div>
-        )}
-        {(props?.showSubtitle !== false) && item.subTitle && (
-          <div style={{ 
-            textAlign: 'center', 
-            fontSize: props.subtitleStyle ? `${props.subtitleStyle.fontSize}px` : (large ? '14px' : '12px'), 
-            fontWeight: props.subtitleStyle?.isBold ? 'bold' : 400, 
-            color: props.subtitleStyle?.fontColor || '#666', 
-            fontStyle: props.subtitleStyle?.isItalic ? 'italic' : 'normal',
-            textDecoration: props.subtitleStyle?.isUnderline ? 'underline' : 'none',
-            lineHeight: '1.3'
-          }}>
-            {item.subTitle}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <>
-      <style>
-        {`
-          .scrollable-container::-webkit-scrollbar {
-            display: none;
-          }
-        `}
-      </style>
-      <div
-        style={{
-          border: '1px solid #e1e1e1',
-          width: '100%',
-          maxWidth: '100%',
-          borderRadius: '0px',
-          height: boxHeight || 'auto',
-          minHeight: boxHeight ? boxHeight : '100px',
-          position: 'relative',
-          overflow: 'hidden',
-          marginTop: '0px',
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-        className='GroupImageListComponent'
-      >
-      {showHeader && (
-        <div
-          className="groupImageHeader"
-          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 || props.nameData || 'Image Gallery'}
-          </p>
-          {currentLayout === 'NONE' && images.length > 2 && (
-            <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',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-            }}
-            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',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-            }}
-            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' ? 'hidden' : 'visible',
-          gap: currentLayout === 'NONE' ? '12px' : '0',
-          padding: '12px',
-          scrollBehavior: 'smooth',
-          backgroundColor: props.carouselBackground || '#fff',
-          borderRadius: '8px',
-          position: 'relative',
-          flex: 1,
-          overflow: 'hidden'
-        }}
-        className="groupImageCarousel"
-      >
-        {/* Navigation buttons - positioned like carousel */}
-        {!showHeader &&currentLayout === 'NONE' && images.length > 2 && (
-          <>
-            <button
-              onClick={scrollLeft}
-              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: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '18px',
-                zIndex: 10,
-                transition: 'all 0.2s ease'
-              }}
-              onMouseOver={(e) => { 
-                e.currentTarget.style.background = 'rgba(0,0,0,0.7)';
-                e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
-              }}
-              onMouseOut={(e) => { 
-                e.currentTarget.style.background = 'rgba(0,0,0,0.5)';
-                e.currentTarget.style.transform = 'translateY(-50%) scale(1)';
-              }}
-            >
-              ‹
-            </button>
-            <button
-              onClick={scrollRight}
-              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: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '18px',
-                zIndex: 10,
-                transition: 'all 0.2s ease'
-              }}
-              onMouseOver={(e) => { 
-                e.currentTarget.style.background = 'rgba(0,0,0,0.7)';
-                e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
-              }}
-              onMouseOut={(e) => { 
-                e.currentTarget.style.background = 'rgba(0,0,0,0.5)';
-                e.currentTarget.style.transform = 'translateY(-50%) scale(1)';
-              }}
-            >
-              ›
-            </button>
-          </>
-        )}
-        {images.length > 0 ? (
-          currentLayout === 'NONE' ? (
-            <div 
-              className="scrollable-container"
-              style={{ 
-                display: 'flex', 
-                gap: '20px', 
-                overflowX: 'auto',
-                scrollbarWidth: 'none', // Firefox
-                msOverflowStyle: 'none' // IE and Edge
-              }}>
-              {images.map((image) => (
-                <div
-                  key={image.id}
-                  style={{
-                    minWidth: '250px',
-                    height: boxHeight,
-                    flexShrink: 0,
-                  }}
-                >
-                  <ImageCard item={image} />
-                </div>
-              ))}
-            </div>
-
-          ) : currentLayout === 'SMALL' ? (
-            <div style={{ 
-              display: 'grid', 
-              gridTemplateColumns: 'repeat(2, 1fr)', 
-              gap: '16px', 
-              padding: '8px',
-              height: '100%'
-            }}>
-              {images.map((image) => (
-                <div key={image.id} style={{ 
-                  height: '100%',
-                  display: 'flex',
-                  flexDirection: 'column'
-                }}>
-                  <ImageCard item={image} />
-                </div>
-              ))}
-            </div>
-          ) : currentLayout === 'MEDIUM' ? (
-            <div style={{ 
-              display: 'grid', 
-              gridTemplateColumns: 'repeat(3, 1fr)', 
-              gap: '16px', 
-              padding: '8px',
-              height: 'auto',
-              overflowX: 'auto',
-
-            }}>
-              {images.map((image) => (
-                <div key={image.id} style={{ 
-                  height: '100%',
-                  display: 'flex',
-                  flexDirection: 'column'
-
-                }}>
-                  <ImageCard item={image} />
-                </div>
-              ))}
-            </div>
-          ) : currentLayout === 'MEDIUM_THREE' ? (
-            <div style={{ 
-              display: 'flex', 
-              flexDirection: 'column', 
-              gap: '16px', 
-              padding: '8px',
-              height: '100%'
-            }}>
-              {images.length > 0 && (
-                <div style={{ flex: '2', minHeight: '200px' }}>
-                  <ImageCard item={images[0]} large />
-                </div>
-              )}
-              {images.length > 1 && (
-                <div style={{ 
-                  display: 'grid', 
-                  gridTemplateColumns: 'repeat(2, 1fr)', 
-                  gap: '16px',
-                  flex: '1'
-                }}>
-                  {images.slice(1).map((image) => (
-                    <div key={image.id} style={{ 
-                      height: '100%',
-                      display: 'flex',
-                      flexDirection: 'column'
-                    }}>
-                      <ImageCard item={image} />
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          ) : null
-        ) : (
-          <div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
-            <p>No images available.</p>
-          </div>
-        )}
-      </div>
-    </div>
-    </>
-  );
-};
-
+import React, { useState } from 'react';
+import { Linodeurl } from '../../const';
+interface ImageData {
+  isDynamic: boolean;
+  shape: string;
+  url: string;
+  alt: string;
+  shapeImageId?: string;
+  width?: number;
+  height?: number;
+}
+
+interface ProductData {
+  pd_type: string;
+  pd_id?: {
+    _id: string;
+    code: string;
+    name: {
+      all: string;
+      displayName?: string;
+    };
+    image?: ImageData;
+    isActive: boolean;
+  };
+  product_data?: {
+    _id: string;
+    code: string;
+    name: string;
+  };
+}
+
+
+
+interface LinkData {
+  url: string | null;
+  target: string | null;
+}
+
+interface PageData {
+  page_type: string | null;
+  pg_type?: string | null;
+
+  page_id?: any;
+  page_data?:any;
+}
+
+interface ImageItem {
+  id: number;
+  attr: ImageData;
+  title: string;
+  subTitle: string;
+  linktype: string;
+  product?: ProductData;
+  tag?: any;
+  link?: LinkData;
+  page?: PageData;
+}
+
+interface GroupImageStatic {
+  _id: string;
+  name: string;
+  code: string;
+}
+
+interface GroupImageDynamic {
+  code: string;
+  name: { all: string };
+  list: ImageItem[];
+  isActive?: boolean;
+}
+
+interface GroupImageData {
+  static: GroupImageStatic;
+  dynamic: GroupImageDynamic;
+  groupimagedata: ImageItem[];
+}
+
+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 GroupImageListProps {
+  nameData: any;
+  data?: Array<{ id: string; type: string }>;
+  types?: any[];
+  type: string;
+  groupimage: GroupImageData;
+  headerText: any;
+  activeStatus: boolean;
+  headerImage: string;
+  headerTextStyle: HeaderTextStyle;
+  layout: DeviceLayoutProps;
+  showHeader: DeviceBooleanProps;
+  isHorizontalScroll: DeviceBooleanProps;
+  headerBackground: string;
+  carouselBackground: string;
+  cardcolor: string;
+  showSubtitle?: DeviceBooleanProps;
+  showTitle?: DeviceBooleanProps;
+  titleStyle?: {
+    fontSize: number;
+    fontColor: string;
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+  };
+  subtitleStyle?: {
+    fontSize: number;
+    fontColor: string;
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+  };
+  selectedChannel?: string;
+}
+
+interface GroupImageListMainProps {
+  props: GroupImageListProps;
+  deviceMode?: string;
+  boxHeight?: string;
+}
+
+// Image Component Integration
+interface ImageComponentProps {
+  imageData: ImageData;
+  linkData: {
+    linktype: string;
+    product?: ProductData;
+    tag?: any;
+    link?: LinkData;
+    page?: PageData;
+  };
+  borderRadius?: number;
+  height?: string;
+  width?: string;
+}
+
+const ImageComponentInternal: React.FC<ImageComponentProps> = ({
+  imageData,
+  linkData,
+  borderRadius = 8,
+  height = '100%',
+  width = '100%'
+}) => {
+  const getImageUrl = (url: string) => {
+    if (!url) return '';
+    if (url.startsWith('http://') || url.startsWith('https://')) return url;
+    return `${Linodeurl}${url}`;
+  };
+
+  const buildLink = () => {
+    console.warn(linkData)
+    switch (linkData.linktype) {
+      
+      case 'NONE':
+        return null;
+      case 'EXTERNAL_LINK':
+      case 'EXTERNAL':
+        return linkData.link?.url || null;
+      case 'PRODUCT': {
+        const pdType = linkData.product?.pd_type;
+        const code = linkData.product?.pd_id?.code || linkData.product?.product_data?.code;
+        if (!code) return null;
+
+        return pdType === 'VARIANT'
+          ? `/${code}`
+          : `/model/${code}`;
+      }
+      case 'TAG':
+        return `/tag/${linkData.tag?.tag_id?.code || linkData?.tag?.tag_data?.code}`;
+      case 'PAGE':
+        return `/page/${linkData.page?.page_id?._id  || linkData.page?.page_data?._id  }?type=${linkData.page?.page_type || linkData.page?.pg_type}`;
+      default:
+        return null;
+    }
+  };
+
+  // const handleImageClick = () => {
+    // const link = buildLink();
+    // if (link === null) return;
+    
+    // if (link.startsWith('http')) {
+    //   window.open(link, linkData.link?.target || '_blank');
+    // } else {
+    //   window.location.href = link;
+    // }
+  // };
+
+  const imageStyle: React.CSSProperties = {
+    width: width,
+    height: height,
+    objectFit: 'contain',
+    borderRadius: `${borderRadius}px`,
+    cursor: linkData.linktype !== 'NONE' ? 'pointer' : 'default',
+    transition: 'transform 0.2s ease'
+  };
+
+  return (
+    <a 
+      href={buildLink() ?? undefined}
+      target={
+        linkData?.linktype === 'EXTERNAL'
+          ? (linkData?.link?.target ?? '_blank') 
+          : '_self'
+      }
+      style={{ 
+        display: 'block', 
+        width: '100%', 
+        height: '100%',
+        textDecoration: 'none',
+        color: 'inherit'
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          borderRadius: `${borderRadius}px`,
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+        className='media-box'
+      >
+        <img
+          className='media-content'
+          src={getImageUrl(imageData.url)}
+          alt={imageData.alt || ''}
+          style={imageStyle}
+          onMouseOver={(e) => {
+            if (linkData.linktype !== 'NONE') {
+              (e.currentTarget as HTMLImageElement).style.transform = 'scale(1.02)';
+            }
+          }}
+          onMouseOut={(e) => {
+            (e.currentTarget as HTMLImageElement).style.transform = 'scale(1)';
+          }}
+        />
+      </div>
+    </a>
+  );
+};
+
+// Main GroupImageList Component
+const GroupImageList: React.FC<GroupImageListMainProps> = ({ 
+  props, 
+  deviceMode = 'web', 
+  boxHeight 
+}) => {
+  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 = () => {
+    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 isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
+  const showTitle = getCurrentBooleanProp(props.showTitle);
+  const showSubtitle = getCurrentBooleanProp(props.showSubtitle);
+  const currentLayout = getCurrentLayout();
+
+  const getImages = (): ImageItem[] => {
+    if (props.type === 'dynamic') {
+      if (props.groupimage?.dynamic?.list?.length) return props.groupimage.dynamic.list;
+    }
+    if (props.groupimage?.groupimagedata?.length) return props.groupimage.groupimagedata;
+    return [];
+  };
+
+  const images = getImages();
+
+  // Carousel navigation buttons (layout NONE)
+  const scrollLeft = () => {
+    const scrollableContainer = document.querySelector('.groupImageCarousel .scrollable-container');
+    if (scrollableContainer) {
+      (scrollableContainer as HTMLElement).scrollBy({ left: -200, behavior: 'smooth' });
+    }
+  };
+
+  const scrollRight = () => {
+    const scrollableContainer = document.querySelector('.groupImageCarousel .scrollable-container');
+    if (scrollableContainer) {
+      (scrollableContainer as HTMLElement).scrollBy({ left: 200, behavior: 'smooth' });
+    }
+  };
+
+  const ImageCard = ({ item, large = false }: { item: ImageItem; large?: boolean }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    
+    return (
+      <div
+        className="imageCard"
+        style={{
+          height: '100%',
+          minHeight: large ? '280px' : '260px',
+          borderRadius: '8px',
+          overflow: 'hidden',
+          border: '1px solid #eee',
+          backgroundColor: props.cardcolor || '#fff',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: large ? '16px' : '12px',
+          boxShadow: isHovered ? '0 4px 8px rgba(0,0,0,0.15)' : '0 2px 4px rgba(0,0,0,0.1)',
+          transition: 'all 0.2s ease',
+          cursor: item.linktype !== 'NONE' ? 'pointer' : 'default',
+          transform: isHovered ? 'translateY(-2px)' : 'translateY(0px)',
+        }}
+        onMouseOver={() => setIsHovered(true)}
+        onMouseOut={() => setIsHovered(false)}
+      >
+        <div style={{ 
+          width: '100%', 
+          height: large ? '200px' : '180px',
+          minHeight: large ? '200px' : '180px',
+          maxHeight: large ? '200px' : '180px',
+          marginBottom: large ? '12px' : '8px', 
+          display: 'flex', 
+          alignItems: 'center', 
+          justifyContent: 'center',
+          overflow: 'hidden',
+          flexShrink: 0
+        }}>
+          <ImageComponentInternal
+            imageData={item.attr}
+            linkData={{
+              linktype: item.linktype,
+              product: item.product,
+              tag: item.tag,
+              link: item.link,
+              page: item.page
+            }}
+            borderRadius={6}
+            height="100%"
+            width="100%"
+          />
+        </div>
+        <div style={{ 
+          display: 'flex', 
+          flexDirection: 'column', 
+          flexShrink: 0,
+          minHeight: 0
+        }}>
+          {showTitle && item.title && (
+            <div style={{ 
+              textAlign: 'center', 
+              fontSize: props.titleStyle ? `${props.titleStyle.fontSize}px` : (large ? '16px' : '14px'), 
+              fontWeight: props.titleStyle?.isBold ? 'bold' : (large ? 600 : 500), 
+              color: props.titleStyle?.fontColor || '#333', 
+              fontStyle: props.titleStyle?.isItalic ? 'italic' : 'normal',
+              textDecoration: props.titleStyle?.isUnderline ? 'underline' : 'none',
+              lineHeight: '1.4', 
+              marginBottom: showSubtitle && item.subTitle ? '4px' : '0',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              wordBreak: 'break-word'
+            }}>
+              {item.title}
+            </div>
+          )}
+          {showSubtitle && item.subTitle && (
+            <div style={{ 
+              textAlign: 'center', 
+              fontSize: props.subtitleStyle ? `${props.subtitleStyle.fontSize}px` : (large ? '14px' : '12px'), 
+              fontWeight: props.subtitleStyle?.isBold ? 'bold' : 400, 
+              color: props.subtitleStyle?.fontColor || '#666', 
+              fontStyle: props.subtitleStyle?.isItalic ? 'italic' : 'normal',
+              textDecoration: props.subtitleStyle?.isUnderline ? 'underline' : 'none',
+              lineHeight: '1.3',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              wordBreak: 'break-word'
+            }}>
+              {item.subTitle}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      style={{
+        border: '1px solid #e1e1e1',
+        width: '100%',
+        maxWidth: '100%',
+        borderRadius: '0px',
+        height: boxHeight || '100%',
+        minHeight: boxHeight ? boxHeight : '100px',
+        position: 'relative',
+        overflow: 'visible',
+        marginTop: '0px',
+        marginBottom: '20px',
+        display: 'flex',
+        flexDirection: 'column'
+      }}
+      className='GroupImageListComponent'
+    >
+      {showHeader && (
+        <div
+          className="groupImageHeader"
+          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 || props.nameData || 'Image Gallery'}
+          </p>
+          {currentLayout === 'NONE' && images.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',
+                  boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+                }}
+                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',
+                  boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+                }}
+                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' ? 'hidden' : 'visible',
+          overflowY: currentLayout === 'NONE' ? 'hidden' : 'visible',
+          gap: currentLayout === 'NONE' ? '12px' : '0',
+          padding: '12px',
+          scrollBehavior: 'smooth',
+          backgroundColor: props.carouselBackground || '#fff',
+          borderRadius: '8px',
+          position: 'relative',
+          flex: 1,
+          minHeight: 0,
+        }}
+        className="groupImageCarousel"
+      >
+        {images.length > 0 ? (
+          currentLayout === 'NONE' ? (
+            <div 
+              className="scrollable-container"
+              style={{ 
+                display: 'flex', 
+                gap: '12px', 
+                overflowX: isHorizontalScroll ? 'auto' : 'hidden',
+                overflowY: 'hidden',
+                alignItems: 'stretch',
+                width: '100%',
+                height: '100%',
+              }}>
+              {images.map((image) => (
+                <div
+                  key={image.id}
+                  style={{
+                    minWidth: '250px',
+                    width: '250px',
+                    flexShrink: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                  }}
+                >
+                  <ImageCard item={image} />
+                </div>
+              ))}
+            </div>
+
+          ) : currentLayout === 'SMALL' ? (
+            <div style={{ 
+              display: 'grid', 
+              gridTemplateColumns: 'repeat(2, 1fr)', 
+              gap: '16px', 
+              padding: '8px',
+              height: '100%'
+            }}>
+              {images.map((image) => (
+                <div key={image.id} style={{ 
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column'
+                }}>
+                  <ImageCard item={image} />
+                </div>
+              ))}
+            </div>
+          ) : currentLayout === 'MEDIUM' ? (
+            <div style={{ 
+              display: 'grid', 
+              gridTemplateColumns: 'repeat(3, 1fr)', 
+              gap: '16px', 
+              padding: '8px',
+              height: 'auto',
+              overflowX: 'auto',
+
+            }}>
+              {images.map((image) => (
+                <div key={image.id} style={{ 
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column'
+
+                }}>
+                  <ImageCard item={image} />
+                </div>
+              ))}
+            </div>
+          ) : currentLayout === 'MEDIUM_THREE' ? (
+            <div style={{ 
+              display: 'flex', 
+              flexDirection: 'column', 
+              gap: '16px', 
+              padding: '8px',
+              height: '100%'
+            }}>
+              {images.length > 0 && (
+                <div style={{ flex: '2', minHeight: '200px' }}>
+                  <ImageCard item={images[0]} large />
+                </div>
+              )}
+              {images.length > 1 && (
+                <div style={{ 
+                  display: 'grid', 
+                  gridTemplateColumns: 'repeat(2, 1fr)', 
+                  gap: '16px',
+                  flex: '1'
+                }}>
+                  {images.slice(1).map((image) => (
+                    <div key={image.id} style={{ 
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column'
+                    }}>
+                      <ImageCard item={image} />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : null
+        ) : (
+          <div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
+            <p>No images available.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
 export default GroupImageList;