tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/Sections/Slideshow/ThreeSectionsWithSlideshow/ThreeSectionsWithSlideshow.jsx

@@ -0,0 +1,614 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { Slide } from 'react-slideshow-image';
+import { css } from 'glamor';
+import { Imagekitimagecomp } from '../../../../Imagekitconfig.jsx';
+import { IoIosArrowRoundForward } from '@react-icons/all-files/io/IoIosArrowRoundForward';
+import { IoIosArrowRoundBack } from '@react-icons/all-files/io/IoIosArrowRoundBack';
+import { BsChevronLeft } from '@react-icons/all-files/bs/BsChevronLeft';
+import { BsChevronRight } from '@react-icons/all-files/bs/BsChevronRight';
+import { Zoom } from 'react-slideshow-image';
+
+const ThreeSectionsWithSlideshow = (props) => {
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [bgimagearrayofobjs, setbgimagearrayofobjs] = useState([]);
+    const [collectionbg, setcollectionbg] = useState([]);
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const routingcountext = props.actions.routingcountext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const fetchCategoriesQueryContext = props.actions.fetchCategoriesQueryContext;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+
+    const [showdownheadermenu, setshowdownheadermenu] = useState(false);
+    const [Choosenindex, setChoosenindex] = useState('');
+    const authdetailsContext = props.actions.authdetailsContext;
+    const [pcollarray, setpcollarray] = useState([]);
+    const [arrayofobjectimagesonly2, setarrayofobjectimagesonly2] = useState([]);
+
+    useEffect(() => {
+        var temppcollarray = [...pcollarray];
+        authdetailsContext?.instinfo?.instcategories?.forEach(function (arrayItem) {
+            arrayItem?.parentcolletions?.forEach(function (item) {
+                temppcollarray.push(item);
+            });
+        });
+        setpcollarray([...temppcollarray]);
+    }, [authdetailsContext]);
+    useEffect(() => {
+        var secpropobj = {};
+        StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+            if (sectionitem.sectionid == props.sectionidprops) {
+                sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+                    secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+                });
+            }
+        });
+        setsectionproperties({ ...secpropobj });
+    }, [StatePagePropertiesContext]);
+
+    useEffect(() => {
+        if (sectionproperties.length != 0 && sectionproperties.arrayofobjectimagesonly != undefined) {
+            var bg_arrayofobjsparsed = JSON.parse(sectionproperties.arrayofobjectimagesonly);
+            if (Array.isArray(bg_arrayofobjsparsed)) {
+                setbgimagearrayofobjs([...bg_arrayofobjsparsed]);
+            }
+        }
+        if (sectionproperties.length != 0 && sectionproperties.arrayofobjectimagesonly2 != undefined) {
+            var arrayofobjectimagesonly2parsed = JSON.parse(sectionproperties.arrayofobjectimagesonly2);
+            if (Array.isArray(arrayofobjectimagesonly2parsed)) {
+                setarrayofobjectimagesonly2([...arrayofobjectimagesonly2parsed]);
+            }
+        }
+    }, [sectionproperties]);
+    const Slideshowsettings = {
+        indicators: false,
+        arrows: false,
+        pauseOnHover: false,
+        scale: 2,
+    };
+    const slideshow_styles = {
+        imgcontainer: css({
+            ':before': {
+                width: '100%',
+                height: '100%',
+                background: 'rgba(0,0,0,0.8)',
+                zIndex: 1,
+                position: 'absolute',
+                content: 's',
+                fontSize: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            },
+        }),
+        categoryname: css({
+            color: sectionproperties.subheader_categorytitle_fontColor,
+            fontSize: sectionproperties.subheader_categorytitle_fontSize + 'px',
+            textTransform: sectionproperties.subheader_categorytitle_textTransform,
+            fontWeight: sectionproperties.subheader_categorytitle_textfontweight,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.subheader_categorytitle_coloronhover,
+            },
+        }),
+        parentcollection: css({
+            color: sectionproperties.subheader_collectiontitle_fontColor,
+            fontSize: sectionproperties.subheader_collectiontitle_fontSize + 'px',
+            textTransform: sectionproperties.subheader_collectiontitle_textTransform,
+            fontWeight: sectionproperties.subheader_collectiontitle_textfontweight,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.subheader_collectiontitle_coloronhover,
+            },
+        }),
+        collectionName: css({
+            color: sectionproperties.collectionsectiontextcolor,
+            fontSize: sectionproperties.collectionsectiontextfontsize + 'px',
+            textTransform: sectionproperties.collectionsectiontexttransform,
+            fontWeight: sectionproperties.collectionsectiontextfontweight,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.collectionsectiontextcoloronhover,
+            },
+        }),
+        dropdowntitle: css({
+            color: sectionproperties.collectionssectiontitlecolor,
+            fontSize: sectionproperties.collectionssectiontitlefontsize + 'px',
+            fontWeight: sectionproperties.collectionssectiontitlefonteweight,
+            textTransform: sectionproperties.collectionssectiontitletexttransfrom,
+            backgroundColor: sectionproperties.collectionssectiontitlebgcolor,
+        }),
+    };
+
+    const SlideshowContent = () => {
+        return (
+            <div class="col-lg-12 p-0">
+                <div class="row m-0 w-100">
+                    {sectionproperties.collectionssectionshow == 'Show' && (
+                        <div
+                            class="col-lg-2 d-md-none"
+                            style={{
+                                height: sectionproperties.collectionsectionheight + 'vh',
+                            }}
+                        >
+                            <div
+                                class="row m-0 w-100"
+                                style={{
+                                    background: sectionproperties.collectionssectionbgcolor,
+                                    boxShadow: '0 0 10px ' + sectionproperties.collectionssectionshadowcolor,
+                                }}
+                            >
+                                <div class="col-lg-12 p-0">
+                                    <div class="row m-0 w-100">
+                                        <div
+                                            className={slideshow_styles.dropdowntitle + ' col-lg-12 p-0 d-flex '}
+                                            style={{
+                                                justifyContent: sectionproperties.titlecentered == 'Centered' ? 'center' : 'start',
+                                            }}
+                                        >
+                                            <p
+                                                className="m-0 p-3 w-100 d-flex"
+                                                style={{
+                                                    justifyContent: sectionproperties.titlecentered == 'Centered' ? 'center' : 'start',
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? sectionproperties.collectionssectiontitleen : sectionproperties.collectionssectiontitlear}
+                                            </p>
+                                        </div>
+                                        <div class="col-lg-12 flex-column cat_dropdown_hover scrollvertical pt-3 px-2" style={{ height: sectionproperties.height + 'vh', overflowY: 'scroll' }}>
+                                            {sectionproperties.fetchparenttype == 'Categories' &&
+                                                authdetailsContext?.instinfo?.instcategories?.map((item, index) => (
+                                                    <div
+                                                        class={slideshow_styles.categoryname + ' row ml-0 mr-0 w-100 cursor-pointer '}
+                                                        onMouseEnter={() => {
+                                                            setshowdownheadermenu(true);
+                                                            setChoosenindex(index);
+                                                        }}
+                                                    >
+                                                        <div className={' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center p-0 '}>
+                                                            <p
+                                                                class={' m-0 p-0 wordbreak wordbreak1 '}
+                                                                onClick={() => {
+                                                                    routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'categories/' + item.categoryid);
+                                                                }}
+                                                            >
+                                                                {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                            </p>
+                                                        </div>
+                                                        <div className={'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '}>
+                                                            <i className={' p-0 h-100 allcentered '}>
+                                                                {langdetect == 'en' ? (
+                                                                    <BsChevronRight size={sectionproperties.collectionsectioniconfontsize} />
+                                                                ) : (
+                                                                    <BsChevronLeft size={sectionproperties.collectionsectioniconfontsize} />
+                                                                )}
+                                                            </i>
+                                                        </div>
+                                                        {index != authdetailsContext?.instinfo?.instcategories - 1 && (
+                                                            <div className="col-lg-12 p-0 mt-3 mb-3">
+                                                                <hr class="m-0" />
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                ))}
+                                            {sectionproperties.fetchparenttype == 'Parent Collections' &&
+                                                pcollarray?.map((item, index) => {
+                                                    if (item.isshowntocustomers == 1) {
+                                                        return (
+                                                            <div
+                                                                class={slideshow_styles.parentcollection + ' row ml-0 mr-0 w-100 cursor-pointer '}
+                                                                onMouseEnter={() => {
+                                                                    setshowdownheadermenu(true);
+                                                                    setChoosenindex(index);
+                                                                }}
+                                                            >
+                                                                <div className={' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center p-0 '}>
+                                                                    <p
+                                                                        class={' m-0 p-0 wordbreak wordbreak1 '}
+                                                                        onClick={() => {
+                                                                            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + item.parentcollectionid);
+                                                                        }}
+                                                                    >
+                                                                        {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                                    </p>
+                                                                </div>
+                                                                <div className={'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '}>
+                                                                    <i className={' p-0 h-100 allcentered '}>
+                                                                        {langdetect == 'en' ? (
+                                                                            <BsChevronRight size={sectionproperties.collectionsectioniconfontsize} />
+                                                                        ) : (
+                                                                            <BsChevronLeft size={sectionproperties.collectionsectioniconfontsize} />
+                                                                        )}
+                                                                    </i>
+                                                                </div>
+                                                                {index != pcollarray - 1 && (
+                                                                    <div className="col-lg-12 p-0 mt-3 mb-3">
+                                                                        <hr class="m-0" />
+                                                                    </div>
+                                                                )}
+                                                            </div>
+                                                        );
+                                                    }
+                                                })}
+                                            {sectionproperties.fetchparenttype == 'Collections' &&
+                                                authdetailsContext?.instinfo?.instcollections.map((item, index) => {
+                                                    if (item.isshowntocustomers == 1) {
+                                                        return (
+                                                            <div
+                                                                class={slideshow_styles.parentcollection + ' row ml-0 mr-0 w-100 cursor-pointer '}
+                                                                onMouseEnter={() => {
+                                                                    setshowdownheadermenu(true);
+                                                                    setChoosenindex(index);
+                                                                }}
+                                                            >
+                                                                <div className={' col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start align-items-center p-0 '}>
+                                                                    {sectionproperties.showcatimage == 'Show' && (
+                                                                        <div
+                                                                            style={{
+                                                                                width: '4.5vh',
+                                                                                height: '4.5vh',
+                                                                                marginRight: langdetect == 'en' ? '5px' : 0,
+                                                                                marginLeft: langdetect == 'ar' ? '5px' : 0,
+                                                                            }}
+                                                                        >
+                                                                            <Imagekitimagecomp
+                                                                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                                                publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                                                path={item.collectionlogo}
+                                                                                loading="lazy"
+                                                                                style={{
+                                                                                    width: '100%',
+                                                                                    height: '100%',
+                                                                                    objectFit: 'contain',
+                                                                                }}
+                                                                            />
+                                                                        </div>
+                                                                    )}
+                                                                    <p
+                                                                        class={' m-0 p-0 wordbreak wordbreak1 '}
+                                                                        onClick={() => {
+                                                                            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+                                                                        }}
+                                                                    >
+                                                                        {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                                    </p>
+                                                                </div>
+                                                                {index != pcollarray - 1 && (
+                                                                    <div className="col-lg-12 p-0 mt-3 mb-3">
+                                                                        <hr class="m-0" />
+                                                                    </div>
+                                                                )}
+                                                            </div>
+                                                        );
+                                                    }
+                                                })}
+                                        </div>
+                                        {sectionproperties.fetchparenttype == 'Categories' &&
+                                            Choosenindex.length != 0 &&
+                                            authdetailsContext?.instinfo?.instcategories[Choosenindex]?.parentcolletions?.length != 0 && (
+                                                <div
+                                                    class={langdetect == 'en' ? 'cat_dropdown-menu cat_dropdown cat_dropdownen' : 'cat_dropdown-menu cat_dropdown cat_dropdownar'}
+                                                    style={{
+                                                        minHeight: sectionproperties.height + 'vh',
+                                                    }}
+                                                    onMouseLeave={() => {
+                                                        setChoosenindex('');
+                                                    }}
+                                                >
+                                                    <div class="row m-0 w-100">
+                                                        {authdetailsContext?.instinfo?.instcategories[Choosenindex]?.parentcolletions?.map((item, index) => (
+                                                            <div class="col-lg-4 p-0">
+                                                                <p
+                                                                    class={slideshow_styles.parentcollection + ' m-0 p-0 mb-3 cursor-pointer wordbreak wordbreak2 '}
+                                                                    onClick={() => {
+                                                                        routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + item.parentcollectionid);
+                                                                    }}
+                                                                    style={{
+                                                                        textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                                    }}
+                                                                >
+                                                                    {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                                </p>
+                                                                {item?.collections?.map((item, index) => (
+                                                                    <div class="col-lg-12 pl-1 pr-1">
+                                                                        <p
+                                                                            class={slideshow_styles.collectionName + ' cursor-pointer wordbreak wordbreak2 mb-1 '}
+                                                                            onClick={() => {
+                                                                                routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+                                                                            }}
+                                                                            style={{
+                                                                                textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                                            }}
+                                                                        >
+                                                                            {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                                        </p>
+                                                                    </div>
+                                                                ))}
+                                                            </div>
+                                                        ))}
+                                                    </div>
+                                                </div>
+                                            )}
+                                        {sectionproperties.fetchparenttype == 'Parent Collections' && Choosenindex.length != 0 && (
+                                            <div
+                                                class={langdetect == 'en' ? 'cat_dropdown-menu cat_dropdown cat_dropdownen' : 'cat_dropdown-menu cat_dropdown cat_dropdownar'}
+                                                style={{
+                                                    minHeight: sectionproperties.height + 'vh',
+                                                }}
+                                                onMouseLeave={() => {
+                                                    setChoosenindex('');
+                                                }}
+                                            >
+                                                <div class="row m-0 w-100">
+                                                    {authdetailsContext?.instinfo?.instcategories[0]?.parentcolletions[Choosenindex]?.collections?.map((item, index) => (
+                                                        <div
+                                                            class="col-lg-4 p-0"
+                                                            onClick={() => {
+                                                                routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+                                                            }}
+                                                        >
+                                                            <div class="col-lg-12 pl-1 pr-1">
+                                                                <p
+                                                                    class={slideshow_styles.collectionName + ' cursor-pointer wordbreak wordbreak2 mb-1 '}
+                                                                    style={{
+                                                                        textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                                    }}
+                                                                >
+                                                                    {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    <div
+                        class={
+                            sectionproperties.collectionssectionshow == 'Show'
+                                ? 'col-lg-10 col-md-12 col-sm-12 p-0 d-flex justify-content-center h-sm-auto'
+                                : 'col-lg-12 p-0 d-flex justify-content-center h-sm-auto'
+                        }
+                        style={{ height: sectionproperties.bgcovercontain == 'Cover' ? sectionproperties.height + 'vh' : 'auto' }}
+                    >
+                        <div className="row m-0 w-100">
+                            <div class={' col-lg-8 mb-md-3 p-md-0 '}>
+                                <Zoom {...Slideshowsettings} transitionDuration={1500} duration={1500} arrow={true} easing="ease">
+                                    {Object.keys(bgimagearrayofobjs).length != 0 &&
+                                        bgimagearrayofobjs.map((item, index) => {
+                                            return (
+                                                <div class={'row m-0 w-100'}>
+                                                    <div
+                                                        class={' p-0 align-items-center d-flex d-md-none '}
+                                                        key={index}
+                                                        style={{
+                                                            cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
+                                                            width: '100%',
+                                                            height: '100%',
+                                                        }}
+                                                        onClick={() => {
+                                                            if (item.IsClickableimg == 'Yes') {
+                                                                if (item.clickableimg_page_route && item.clickableimg_page_route.length != 0) {
+                                                                    routingcountext(item.clickableimg_page_route, false, '');
+                                                                } else {
+                                                                    routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.Clickableimg_getcoection);
+                                                                }
+                                                            }
+                                                        }}
+                                                    >
+                                                        <Imagekitimagecomp
+                                                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                            publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                            path={
+                                                                langdetect == 'en'
+                                                                    ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.bgsection_image
+                                                                    : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.bgsection_image_ar
+                                                            }
+                                                            style={{
+                                                                cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
+                                                                objectFit: 'contain',
+                                                                margin: 0,
+                                                                padding: 0,
+                                                                width: '100%',
+                                                                height: '100%',
+                                                                borderTopLeftRadius:
+                                                                    langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
+                                                                borderTopRightRadius:
+                                                                    langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px',
+                                                                borderBottomRightRadius:
+                                                                    langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
+                                                                borderBottomLeftRadius:
+                                                                    langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
+                                                            }}
+                                                        />
+                                                    </div>
+                                                    <div
+                                                        class={' p-0 align-items-center d-none d-md-flex '}
+                                                        key={index}
+                                                        style={{
+                                                            cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
+                                                            width: '100%',
+                                                            height: '100%',
+                                                        }}
+                                                        onClick={() => {
+                                                            if (item.IsClickableimg == 'Yes') {
+                                                                if (item.clickableimg_page_route && item.clickableimg_page_route.length != 0) {
+                                                                    routingcountext(item.clickableimg_page_route, false, '');
+                                                                } else {
+                                                                    routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.Clickableimg_getcoection);
+                                                                }
+                                                            }
+                                                        }}
+                                                    >
+                                                        <Imagekitimagecomp
+                                                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                            publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                            path={
+                                                                langdetect == 'en'
+                                                                    ? '/tr:w-' + sectionproperties.imagetr_w_resp + ',h-' + sectionproperties.imagetr_h_resp + '/' + item.bgsection_imageresponsive
+                                                                    : '/tr:w-' + sectionproperties.imagetr_w_resp + ',h-' + sectionproperties.imagetr_h_resp + '/' + item.bgsection_imageresponsive_ar
+                                                            }
+                                                            style={{
+                                                                cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
+                                                                objectFit: 'contain',
+                                                                margin: 0,
+                                                                padding: 0,
+                                                                width: '100%',
+                                                                height: '100%',
+                                                                borderTopLeftRadius:
+                                                                    langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
+                                                                borderTopRightRadius:
+                                                                    langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px',
+                                                                borderBottomRightRadius:
+                                                                    langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
+                                                                borderBottomLeftRadius:
+                                                                    langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
+                                                            }}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            );
+                                        })}
+                                </Zoom>
+                            </div>
+                            <div class="col-lg-4 p-md-0">
+                                <div class="row m-0 w-100">
+                                    <div class="col-lg-12 col-md-6 col-sm-6 p-0 mb-xl-3 mb-lg-3 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1">
+                                        <div
+                                            style={{
+                                                position: 'relative',
+                                                cursor: arrayofobjectimagesonly2[0]?.IsClickableimg == 'Yes' ? 'pointer' : 'default',
+                                            }}
+                                            onClick={() => {
+                                                if (arrayofobjectimagesonly2[0].IsClickableimg == 'Yes') {
+                                                    if (arrayofobjectimagesonly2[0].clickableimg_page_route != undefined && arrayofobjectimagesonly2[0].clickableimg_page_route.length != 0) {
+                                                        // routingcountext(arrayofobjectimagesonly2[0].clickableimg_page_route, false, '');
+                                                        window.open(arrayofobjectimagesonly2[0].clickableimg_page_route, '_blank');
+                                                    } else {
+                                                        routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + arrayofobjectimagesonly2[0].Clickableimg_getcoection2);
+                                                    }
+                                                }
+                                            }}
+                                        >
+                                            <Imagekitimagecomp
+                                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                path={
+                                                    arrayofobjectimagesonly2.length != 0
+                                                        ? langdetect == 'en'
+                                                            ? arrayofobjectimagesonly2[0]?.bgsection_image2
+                                                            : arrayofobjectimagesonly2[0]?.bgsection_image_ar2
+                                                        : ''
+                                                }
+                                                style={{
+                                                    height: '100%',
+                                                    width: '100%',
+                                                    objectFit: 'contain',
+                                                    borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
+                                                    borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
+                                                    borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
+                                                    borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-12 col-md-6 col-sm-6 p-0 mb-xl-3 mb-lg-3 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1">
+                                        <div
+                                            style={{
+                                                position: 'relative',
+                                                cursor: arrayofobjectimagesonly2[1]?.IsClickableimg == 'Yes' ? 'pointer' : 'default',
+                                            }}
+                                            onClick={() => {
+                                                if (arrayofobjectimagesonly2[1].IsClickableimg == 'Yes') {
+                                                    if (arrayofobjectimagesonly2[1].clickableimg_page_route != undefined && arrayofobjectimagesonly2[1].clickableimg_page_route.length != 0) {
+                                                        // routingcountext(arrayofobjectimagesonly2[1].clickableimg_page_route, false, '');
+                                                        window.open(arrayofobjectimagesonly2[1].clickableimg_page_route, '_blank');
+                                                    } else {
+                                                        routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + arrayofobjectimagesonly2[1].Clickableimg_getcoection2);
+                                                    }
+                                                }
+                                            }}
+                                        >
+                                            <Imagekitimagecomp
+                                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                path={
+                                                    arrayofobjectimagesonly2.length != 0
+                                                        ? langdetect == 'en'
+                                                            ? arrayofobjectimagesonly2[1]?.bgsection_image2
+                                                            : arrayofobjectimagesonly2[1]?.bgsection_image_ar2
+                                                        : ''
+                                                }
+                                                style={{
+                                                    height: '100%',
+                                                    width: '100%',
+                                                    objectFit: 'contain',
+                                                    borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
+                                                    borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
+                                                    borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
+                                                    borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div
+            class={
+                sectionproperties.collectionssectionshow == 'Show'
+                    ? 'row ml-0 mr-0 w-100 d-flex justify-content-center px-1025-1 pl-md-2 pr-md-2'
+                    : sectionproperties.width == '100'
+                    ? 'row ml-0 mr-0 w-100 d-flex justify-content-center px-md-3'
+                    : 'row ml-0 mr-0 w-100 d-flex justify-content-center px-1025-1 pl-md-2 pr-md-2'
+            }
+            style={{
+                paddingBottom: sectionproperties.marginBottom + 'px',
+                paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
+                paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
+                background: sectionproperties.backgroundColor,
+            }}
+            onMouseEnter={() => {
+                setChoosenindex('');
+            }}
+        >
+            <div class="col-lg-12 p-0">
+                <div
+                    class="row m-0 w-100 d-flex d-md-none"
+                    style={{
+                        paddingTop: sectionproperties.marginTop + 'px',
+                    }}
+                    onMouseLeave={() => {
+                        setChoosenindex('');
+                    }}
+                >
+                    {SlideshowContent()}
+                </div>
+                <div
+                    class="row m-0 w-100 d-none d-md-flex"
+                    style={{
+                        paddingTop: sectionproperties.marginTopResp + 'px',
+                    }}
+                    onMouseLeave={() => {
+                        setChoosenindex('');
+                    }}
+                >
+                    {SlideshowContent()}
+                </div>
+            </div>
+        </div>
+    );
+};
+export default ThreeSectionsWithSlideshow;