tabexseriescomponents 0.0.781 → 0.0.784

package/srcoman/TabexComponents/Cards/Prouductcard_with_zoomhover/Prouductcard_with_zoomhover.jsx

@@ -1,137 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import cardsstyles from '../../../styles/cards/Prouductcard_with_zoomhover.module.css';
-import { css } from 'glamor';
-import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
-const Prouductcard_with_zoomhover = (props) => {
-    const [sectionproperties, setsectionproperties] = useState('');
-    const [item, setitem] = useState(props.cardinfoitemprops);
-    const [index, setindex] = useState(props.cardinfoindexprops);
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
-    const addtofavoritescontext = props.actions.addtofavoritescontext;
-    const setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
-    const AddtoCartContext = props.actions.AddtoCartContext;
-    const AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
-    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
-    const routingcountext = props.actions.routingcountext;
-    const cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
-    const ikimagecredcontext = props.actions.ikimagecredcontext;
-
-    useEffect(() => {
-        if (props.srcfrom == 'addsectionform') {
-            var secpropobj = {};
-            props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
-                secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
-            });
-
-            setsectionproperties({ ...secpropobj });
-        } else {
-            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(() => {
-        setitem(props.cardinfoitemprops);
-    }, [props.cardinfoitemprops]);
-    useEffect(() => {
-        if (props.cardinfoitemprops != undefined) {
-            setitem(props.cardinfoitemprops);
-        }
-    }, [props.cardinfoitemprops]);
-    const card_cssstyles = {
-        productcard: css({
-            background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
-            opacity: sectionproperties.cardbg_opacity,
-            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
-            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
-            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
-            borderTopRightRadius: langdetect == 'en' ? sectionproperties.borderTopRightRadius + 'px' : sectionproperties.borderTopLeftRadius + 'px',
-            paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
-            paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
-            paddingTop: sectionproperties.paddingTop + 'px',
-            marginBottom: sectionproperties.marginBottom + 'px',
-            marginTop: sectionproperties.marginTop + 'px',
-            paddingBottom: sectionproperties.paddingBottom + 'px',
-            boxShadow: sectionproperties.sectioncardshadow == 'Show' ? '0 0 10px ' + sectionproperties.sectioncardshadowcolor : 'none',
-            border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
-            transition: '.3s',
-            height: '400px',
-            ':hover': {
-                categorycardtext: css({
-                    color: sectionproperties.text_secondarycolor,
-
-                    transitionDelay: '0.3s',
-                    ':after': {
-                        borderBottomColor: sectionproperties.text_secondarycolor,
-                    },
-                }),
-            },
-        }),
-        categorycardtext: css({
-            fontSize: sectionproperties.generaltext_fontSize + 'px',
-            color: sectionproperties.generaltext_fontColor,
-            textTransform: sectionproperties.generaltext_textTransform,
-            fontWeight: sectionproperties.generaltext_fontWeight,
-            opacity: 1,
-            transitionDelay: '0.3s',
-            ':after': {
-                borderBottomColor: sectionproperties.generaltext_fontColor,
-            },
-        }),
-        cardbtn: css({
-            fontWeight: sectionproperties.generalbtn_fontweight,
-            backgroundColor: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
-            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.generalbtn_bordertopleftradius + 'px' : sectionproperties.generalbtn_bordertoprightradius + 'px',
-            borderTopRightRadius: langdetect == 'en' ? sectionproperties.generalbtn_bordertoprightradius + 'px' : sectionproperties.generalbtn_bordertopleftradius + 'px',
-            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.generalbtn_borderbottomleftradius + 'px' : sectionproperties.generalbtn_borderbottomrightradius + 'px',
-            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.generalbtn_borderbottomrightradius + 'px' : sectionproperties.generalbtn_borderbottomleftradius + 'px',
-            height: sectionproperties.generalbtn_height + 'px',
-            width: sectionproperties.generalbtn_width + 'px',
-            fontSize: sectionproperties.generalbtn_fontsize + 'px',
-            color: sectionproperties.generalbtn_textColor,
-            textTransform: sectionproperties.generalbtn_texttransform,
-            opacity: sectionproperties.generalbtn_opacity,
-            ':hover': {
-                backgroundColor: sectionproperties.generalbtn_bgColoronhover,
-                color: sectionproperties.generalbtn_textColoronhover,
-                opacity: sectionproperties.generalbtn_opacityonhover,
-            },
-        }),
-    };
-
-    return (
-        <div
-            class="row m-0 w-100"
-            style={{
-                paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
-                paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px',
-            }}
-        >
-            <div
-                class={`${cardsstyles.productcard} ${card_cssstyles.productcard}` + ' d-flex flex-row justify-content-center align-items-center w-100 '}
-                style={{
-                    backgroundImage: `url('https://media.istockphoto.com/photos/fashionable-woman-in-pink-dress-on-pink-background-picture-id917325078?k=20&m=917325078&s=170667a&w=0&h=1QwDo4uUflE8aofqp7bGtw4TNS10ClIh5u13VE75sxk=')`,
-                    backgroundRepeat: 'no-repeat',
-                    backgroundSize: 'cover',
-                }}
-            >
-                <div class="d-flex flex-column justify-content-center align-items-center">
-                    <a class={`${card_cssstyles.categorycardtext}`} href="">
-                        Sale
-                    </a>
-                    <button class={`${card_cssstyles.cardbtn} ` + ' mt-2 '}>Showmore</button>
-                </div>
-            </div>
-        </div>
-    );
-};
-export default Prouductcard_with_zoomhover;